轮播图的指示器

目录

效果：

template 部分

script 部分

style 部分

---

效果：

轮播图的指示按钮

template 部分

<view class="categorySwiper">
		<view class="swiperBox">
			<swiper circular:duration="duration" @change="swiperChange">
				<swiper-item class="swiperitem" v-for="(item,idx) in list" :key="idx">
					<!-- 每个小标签 -->
					<view class="box" v-for="sub in item">
						<!-- <image :src="../../static/travel.jpg"></image> -->
						<img src="../../static/travel.jpg" alt="" srcset="">
						<view class="">
							{{sub.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 指示器 -->
			<view class="cursor">
				<view class="cursorItem" :class="idx==categoryIdx ? 'categoryCur' : ''" v-for=
				"(item,idx) in list" :key="idx"></view>
			</view>
		</view>
	</view>

script 部分

export default {
		data() {
			return {
				list: [
					[
						{title:'昂昂昂',id:1},
						{title:'这这这',id:2},
						{title:'嘻嘻嘻',id:3},
						{title:'去去去',id:4},
						{title:'我问问',id:5},
						{title:'诶诶诶',id:6},
						{title:'啥啥啥',id:7},
						{title:'热热热',id:8},
					],
					[
						{title:'来了来',id:11},
						{title:'发发发',id:12},
						{title:'帅帅帅',id:13},
						{title:'打豆豆',id:14},
						{title:'停停停',id:15},
						{title:'哎哎哎',id:16},
						{title:'赞赞赞',id:17},
						{title:'呜呜呜',id:18},
					],
				],
				categoryIdx: 0 
			}
		},
		methods: {
			swiperChange(e) {
				this.categoryIdx = e.detail.current
				console.log(e)
			},
			
		},

	}

style 部分

<style lang="scss">
	.categorySwiper {
		
		.swiperBox {
			margin: 24rpx 0;
			height: 415rpx;
			background: #fff;
		}
		.swiper {
			height: 366rpx !important;
			background: #fff !important;
		}
		.swiperitem {
			display: flex;
			flex-wrap: wrap;
			height: 366rpx !important;
			border-radius: 24rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			padding: 24rpx 24rpx 0;
			box-sizing: border-box;
		}
		.box {
			margin-right: 79rpx;
			img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}
		}
		.box:nth-child(4n) {
			margin-right: 0;
		}
		// margin-bottom: 15px;
	}
	.cursor {
		// margin-bottom: 15px;
		display: flex;
		justify-content: center;
		.cursorItem {
			width: 40rpx;
			height: 12rpx;
			background: #d4d4d4;
			border-radius: 32rpx;
		}
		.categoryCur {
			background: #6d18fc;
		}
	}
	uni-swiper {
	    display: block;
	    height: 200px;
	}
</style>