uniapp组件-uni-swiper-dot轮播图指示点

最新推荐文章于 2024-09-25 16:29:27 发布

疆~

最新推荐文章于 2024-09-25 16:29:27 发布

阅读量8.3k

点赞数 8

文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_40323256/article/details/113905155

版权

微信小程序/uniCloud 专栏收录该内容

64 篇文章 43 订阅

订阅专栏

本文介绍了如何使用uni-app的uni-swiper-dot组件创建轮播图指示点，并展示了不同模式的效果。通过设置mode属性，可以实现default、round、indexes和nav四种模式。同时，详细讲解了dotsStyles属性，用于自定义指示点的背景颜色、边框等样式，提供多种颜色方案供选择。示例代码中展示了如何结合swiper组件动态展示图片轮播，并监听滑动事件。

摘要由CSDN通过智能技术生成

官方：uni-swiper-dot 轮播图指示点 - DCloud 插件市场

<template>
	<view class="content">
		<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" :mode="mode" field="content" :dotsStyles="dotsStyles">
			<swiper style="height: 400rpx;" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view>
						<image  :src="item.url" mode="aspectFill" style="width: 100%;"/>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: [{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'round',//default 、round 、 indexes、nav
				swiperDotIndex: 0,
				dotsStyles:{
						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'
					}
			}
		},
		onLoad() {},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			}
		}
	}
</script>

注意：上面属性中的mode为nav时，uni-swiper-dot标签中的 field字段必须指定值，这里是info中的"content"

mode属性值有：default 、round 、 indexes、nav

default：

round:

indexes:

nav:

此外，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'
}, //黑色
{
	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'
} //蓝色