uniCloud云开发----7、uniapp通过uni-swiper-dot实现轮播图

news2024/12/25 2:01:48

uniapp通过uni-swiper-dot实现轮播图

  • 前言
  • 效果图
    • 1、官网实现的效果
    • 2、需求中使用到的效果图
  • 官网提供的效果图源码
    • 1、html部分
    • 2、js部分
    • 3、css部分
  • 根据需求调整轮播图

前言

uni-swiper-dot.文档
uni-swiper-dot 轮播图指示点 - DCloud 插件市场
本次展示根据需求制作的和官网用到的轮播图和源码

效果图

1、官网实现的效果

在这里插入图片描述

2、需求中使用到的效果图

在这里插入图片描述

官网提供的效果图源码

使用官网的代码需要下载uni-section
uni-swiper-dot提供的api
在这里插入图片描述
可以通过改变uni-swiper-dot的参数来实现轮播图的样式和颜色以及距离等
在这里插入图片描述

1、html部分

<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<uni-section title="模式选择" type="line">
			<view class="example-body">
				<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
					<text class="example-body-item-text">default</text></view>
				<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
						class="example-body-item-text">dot</text></view>
				<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
					<text class="example-body-item-text">round</text></view>
				<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
						class="example-body-item-text">nav</text></view>
				<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
					<text class="example-body-item-text">indexes</text></view>
			</view>
		</uni-section>

		<uni-section title="颜色样式选择" type="line">
			<view class="example-body">
				<template v-if="mode !== 'nav'">
					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
						class="example-body-item" @click="selectStyle(index)">
						<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
							class="example-body-dots" />
						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
							class="example-body-dots" />
						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
							class="example-body-dots" />
					</view>
				</template>
				<template v-if="mode === 'nav'">
					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
						:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
						@click="selectStyle(index)">
						<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
					</view>
				</template>
			</view>
		</uni-section>

	</view>
</template>

2、js部分

<script>
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0
			}
		},
		onLoad() {},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			}
		}
	}
</script>

3、css部分

<style lang="scss">
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>

根据需求调整轮播图

其中使用到了轮播头图
其中使用到了swiper的circular autoplay两个参数
circular：是否采用衔接滑动，即播放到末尾后重新回到开头
autoplay：是否自动切换
官网提供的swiper的api
官网提供的swiper的api 

<template>
	<view class='home'>
		<view class='home_swiper'>
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex" circular autoplay
					easing-function="easeInOutCubic">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index" @click="SwItemClick(item.nextUrl)">
							<!-- <text style="color: #fff; font-size: 32px;">{{item.content}}</text> -->
							<!-- <img :src="item.url" alt="" style='width:100%;height:100%'> -->
							<div class='switemImage' :style="{backgroundImage: 'url('+item.url+')'}" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
	</view>
</template>

<script>
	const homeSwiper = uniCloud.importObject("homeSwiper")
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A',
						nextUrl: '/pages/place/place'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'default',
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				swiperDotIndex: 0
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			SwItemClick(e) {
				console.log(e)
				uni.switchTab({
					url: e
				})
			},
			getData() {
				homeSwiper.get('111').then(res=>{
					console.log(res.data)
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: rgb(241, 236, 229);

		.swiper-box {
			height: 20rem;
		}

		.swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 20rem;
			color: #fff;
		}

		.swiper-item0 {
			background-color: #cee1fd;
		}

		.swiper-item1 {
			background-color: #b2cef7;
		}

		.swiper-item2 {
			background-color: #cee1fd;
		}

		.image {
			width: 750rpx;
		}

		::v-deep .uni-swiper__dots-box {
			justify-content: left;
			left: 2rem;

			.uni-swiper__dots-item {
				margin-left: 0px
			}
		}

		.switemImage {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center
		}

	}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/366861.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

记一次从文件备份泄露到主机上线

记一次从文件备份泄露到主机上线

前言 记录下某个测试项目中&#xff0c;通过一个文件备份泄露到主机上线的过程。 文件备份泄露 对于测试的第一项当然是弱口令&#xff0c;bp跑了一通词典&#xff0c;无果。目录又爆破了一通&#xff0c;发现一个web.rar可通&#xff0c;赶紧下载看看&#xff0c;如下图所示…
阅读更多...
uniapp项目搭架和首页制作

uniapp项目搭架和首页制作

论坛项目uniapp跨端创建uniapp项目备注&#xff1a;配置常用目录&#xff08;目录名称可自定义&#xff09;配置项目的tabbar在page.json文件中配置。"tabBar": {"borderStyle": "black","color": "#90868a","selected…
阅读更多...
CTFer成长之路之命令执行漏洞

CTFer成长之路之命令执行漏洞

命令执行漏洞CTF 死亡ping命令 题目描述: 路由器管理台经常存在的网络ping测试&#xff0c;开发者常常会禁用大量的恶意字符串&#xff0c;试试看如何绕过呢&#xff1f; docker-compose.yml version: "3.2"services:converter:image: registry.cn-hangzhou.ali…
阅读更多...
液氮恒温器（电学）T9015的技术规格

液氮恒温器（电学）T9015的技术规格

液氮型低温恒温器&#xff0c;利用液氮作为降温媒介&#xff0c;标准恒温器可实现快速降温至液氮温度&#xff08;约20min&#xff09;&#xff0c;其工作原理是在恒温器内部液氮腔内装入液氮&#xff0c;通过调整控温塞与冷指的间隙来保持冷指的漏热稳定在一定值上&#xff0c…
阅读更多...
【测试面试】头条大厂，测试开发岗真实一面。你能抵得住吗？

【测试面试】头条大厂，测试开发岗真实一面。你能抵得住吗？

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 小吴&#xff1a; 现…
阅读更多...
力扣SQL刷题12

力扣SQL刷题12

目录标题176. 第二高的薪水 - 输出null问题177. 第N高的薪水--omg&#xff0c;第一次遇到SQL里写function178. 分数排名 - 简单626. 换座位 - 新题型176. 第二高的薪水 - 输出null问题 题型&#xff1a;输出第二大的数值&#xff0c;且不存在时输出null 解答&#xff1a; 解法…
阅读更多...
ELK日志分析--ES（Elasticsearch）--（一）

ELK日志分析--ES（Elasticsearch）--（一）

ES基本介绍 单机ES部署 ES&#xff08;Elasticsearch&#xff09;集群部署 1.基本介绍 Elasticsearch&#xff1a;存储、搜索和分析 Elasticsearch是Elastic Stack核心的分布式搜索和分析引擎。Logstash和Beats有助于收集&#xff0c;聚合和丰富你的数据并将其存储在Elastics…
阅读更多...
Revit教程：标注技巧，底部延伸距离“设置，实时轴号

Revit教程：标注技巧，底部延伸距离“设置，实时轴号

一、Revit在三维视图中的高程点标注技巧 一般在平面图上高程点是水平放置的&#xff0c;但是在三维显示中&#xff0c;如何将高程点水平放置呢? 在三维视图中&#xff0c;有些时候根据项目要求&#xff0c;要在建筑上放置高程点&#xff0c;但是将视图旋转以后&#xff0c;高程…
阅读更多...
【python】anaconda 管理 python 环境

【python】anaconda 管理 python 环境

anaconda 管理虚拟环境anaconda 简介python 虚拟环境的安装查看当前 anaconda中所有的虚拟环境创建新的虚拟环境激活所创建的虚拟环境删除指定的虚拟环境退出当前虚拟环境查看当前虚拟环境中所有安装的库安装常用包pycharmpycharm 下环境配置pycharm 使用anaconda 简介 anacon…
阅读更多...
新能源车动力总成技术探讨：混动和纯电之争、电驱动未来发展趋势

新能源车动力总成技术探讨：混动和纯电之争、电驱动未来发展趋势

随着我国节能与新能源汽车渗透率提升&#xff0c;对节能与新能源车各种技术路线特别是动力总成技术的探讨&#xff0c;也成为汽车产业各级企业人士讨论的热点。爱普搜汽车、精研院邀请了汽车行业众多整车厂、Tier 1/2企业、中汽协、汽车技术咨询公司的技术专家/高管&#xff0c…
阅读更多...
数据结构与算法之最小爬楼梯费用动态规划

数据结构与算法之最小爬楼梯费用动态规划

继续上一道题目&#xff0c;在上一道题目的基础之上&#xff0c;我们来解决这一道爬楼梯最小费用题。一.题目描述二.思路(动态规划五部曲)确定dp数组以及下标的含义使用动态规划&#xff0c;就要有一个数组来记录状态&#xff0c;本题只需要一个一维数组dp[i]就可以了。dp[i]的…
阅读更多...
剑指 Offer 34. 二叉树中和为某一值的路径

剑指 Offer 34. 二叉树中和为某一值的路径

摘要 剑指 Offer 34. 二叉树中和为某一值的路径 注意到本题的要求是&#xff0c;找到所有满足从根节点到某个叶子节点经过的路径上的节点之和等于目标和的路径。核心思想是对树进行一次遍历&#xff0c;在遍历时记录从根节点到当前节点的路径和&#xff0c;以防止重复计算。 …
阅读更多...
如何写出一份优秀的简历和求职信？

如何写出一份优秀的简历和求职信？

写一份优秀的简历和求职信是成功求职的重要一步。 01、简历 突出重点信息&#xff1a;把最重要的信息放在简历的前面&#xff0c;例如您的工作经验和教育背景等。 使用简明扼要的语言&#xff1a;在简历中使用简短的句子和简明扼要的语言&#xff0c;让招聘者能够快速了解您的…
阅读更多...
Java 诊断工具Arthas--优化速度+堆栈判断

Java 诊断工具Arthas--优化速度+堆栈判断

文章目录前言使用总结前言 我们在日常开发中&#xff0c;当我们遇到大数据量处理的时候&#xff0c;总是苦恼有时候到底慢在哪&#xff1f; 在coding的时候就要注意以下几点&#xff1a; 循环内打印日志循环内查询sql循环内多次发送http请求查询的时候尽量指定查询字段&#…
阅读更多...
Redis的过期策略

Redis的过期策略

Redis 过期删除与内存淘汰 #Redis 使用的过期删除策略是什么&#xff1f; Redis 是可以对 key 设置过期时间的&#xff0c;因此需要有相应的机制将已过期的键值对删除&#xff0c;而做这个工作的就是过期键值删除策略。 每当我们对一个 key 设置了过期时间时&#xff0c;Red…
阅读更多...
GEE学习笔记 五十四：QGIS展示3D的高程数据

GEE学习笔记 五十四：QGIS展示3D的高程数据

QGIS作为一个开源的非常好用的本地GIS工具&#xff0c;这里不在赘述&#xff0c;这里说它的一个比较有意思的内容。通过DEM数据展示3D地形。 下载DEM&#xff08;高程数据&#xff09; 比如从官网下载&#xff0c;或者从别的地方获取&#xff0c;这里就不在赘述。我这里下载使…
阅读更多...
BatchNorm与LayerNorm的比较

BatchNorm与LayerNorm的比较

Batch Normalization存在的一些问题 &#xff08;1&#xff09;BN在mini-batch较小的情况下不太适用 BN是对整个mini-batch的样本统计均值和方差 当训练样本数很少时&#xff0c;样本的均值和方差不能反映全局的统计分布信息&#xff0c;从而导致效果下降 &#xff08;2&am…
阅读更多...
【ROS2开发】BOOST-C++实现topic通信

【ROS2开发】BOOST-C++实现topic通信

一、说明 不知是何原因&#xff0c;ROS2居然没有集成开发环境&#xff0c;因此工程管理、编译等是全手工活。本文将详细讲述工程构建、编译、topic节点具体内容。让初学者直接进入战场环境。结合图文&#xff0c;尽量看清开发过程。 二、目标实现 我们这里就是要手工构建一个Pu…
阅读更多...
根据数据规模猜解法

根据数据规模猜解法

文章目录0、结论1、题目1.1 题目描述1.2 思路分析1.2.1 暴力递归解法11.2.2 解法1修改成动态规划1.2.3 暴力递归解法21.2.4 解法2修改成动态规划1.2.5 对数器1.3 小结2、总结0、结论 1&#xff09;C/C&#xff0c;1秒处理的指令条数为 10810^8108 2&#xff09;Java等语言&am…
阅读更多...
大数据核心技术是什么

大数据核心技术是什么

大数据的核心层&#xff1a;数据采集层、数据存储与分析层、数据共享层、数据应用层&#xff0c;可能叫法有所不同本质上的角色都大同小异。 大数据的核心技术都包括什么&#xff1f; 1、数据采集 数据采集的任务就是把数据从各种数据源中采集和存储到数据存储上&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023