uniapp自定義輪播訓示器

<template>
	<view class="">
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/coen/dingwei.svg" mode="widthFix"></image>
			<text class="search-text">阿裡巴巴淘寶城2期西溪園區</text>
			<text>></text>
		</view>
		<!-- 搜尋 -->
		<view class="search-cont">
			<view class="search" @click="seaRch()">
				<image src="../../../static/coen/sousuo.svg" mode="widthFix" class="search-img"></image>
				<input type="text" placeholder="麻辣燙" disabled />
			</view>
		</view>
		<!-- 自定義輪播 -->
		<view class="swiper-view">
			<swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(item, index) in lable" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(listdata, index) in item" :key="index">
								<view class="conteng-img">
									<image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
									<text>{{ listdata.title }}</text>
								</view>
							</block>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 訓示點 -->
			<view class="instruct-view">
				<block v-for="(item, index) in instructdata" :key="index">
					<view class="instruct" :class="{ active: index == num }">{{ item }}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 0,
			// 面闆訓示點
			instructdata: ['', ''],
			// 輪播數組
			lable: [
				[
					{
						img: '../../../static/inster/meishi.png',
						title: '美食'
					},
					{
						img: '../../../static/inster/chaoshi.png',
						title: '超市便利'
					},
					{
						img: '../../../static/inster/shuiguo.png',
						title: '蔬菜水果'
					},
					{
						img: '../../../static/inster/meituan.png',
						title: '美團專送'
					},
					{
						img: '../../../static/inster/paotui.png',
						title: '跑腿代購'
					},
					{
						img: '../../../static/inster/yexiao.png',
						title: '宵夜'
					},
					{
						img: '../../../static/inster/jintie.png',
						title: '津貼聯盟'
					},
					{
						img: '../../../static/inster/pinping.png',
						title: '甜點飲品'
					},
					{
						img: '../../../static/inster/shaokao.png',
						title: '龍蝦燒烤'
					},
					{
						img: '../../../static/inster/dangao.png',
						title: '甜蜜蛋糕'
					}
				],
				[
					{
						img: '../../../static/inster/hanbao.png',
						title: '漢堡披薩'
					},
					{
						img: '../../../static/inster/liaoli.png',
						title: '日韓料理'
					},
					{
						img: '../../../static/inster/malatang.png',
						title: '麻辣燙'
					},
					{
						img: '../../../static/inster/kuaican.png',
						title: '快食簡餐'
					},
					{
						img: '../../../static/inster/xianhua.png',
						title: '浪漫鮮花'
					},
					{
						img: '../../../static/inster/lazi.png',
						title: '無辣不歡'
					},
					{
						img: '../../../static/inster/jiaozi.png',
						title: '餃子館'
					},
					{
						img: '../../../static/inster/xiaochi.png',
						title: '小吃館'
					},
					{
						img: '../../../static/inster/baofan.png',
						title: '煲仔飯'
					},
					{
						img: '../../../static/inster/qita.png',
						title: '其他'
					}
				]
			]
		};
	},
	methods: {
		// 滑塊事件
		bannerfun(e) {
			console.log(e.detail.current);
			this.num = e.detail.current;
		},
		// 到搜尋頁面
		seaRch() {
			wx.navigateTo({
				url: '../search/search'
			});
		}
	}
};
</script>

<style  scoped>
/* 定位 */
.search-view image {
	width: 35upx;
	height: 35upx;
}

.search-view {
	font-size: 30upx;
	font-weight: bold;
	display: flex;
	align-items: center;
	height: 80upx;
}

.search-text {
	padding: 0 10upx;
}

/* 搜尋 */
.search-img {
	margin: auto 0 auto 20upx;
	width: 40upx;
	height: 40upx;
}

.search {
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	display: flex;
	flex-direction: flex;
	background: #eff3f4;
	border-radius: 10rpx;
}

.search input {
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	font-size: 25upx;
	color: #666666;
}

.search-cont {
	display: flex;
	justify-content: space-between;
	height: 70upx;
	align-items: center;
}

/* 輪播 */

swiper {
	height: 320upx !important;
}

/* 九宮格 */
.swiper-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	height: 320upx;
}

.conteng-img {
	width: calc((100% / 5) - 12px) !important;
	margin: 6px;
	/* height: 120upx; */
	position: relative;
	text-align: center;
}

.conteng-img text {
	padding-top: 20upx;
	font-size: 25upx;
}

.uploadimg {
	width: 70upx;
	height: 70upx;
	border-radius: 50upx;
	display: block;
	margin: 0 auto;
}

/* 訓示點 */
.instruct-view {
	display: flex;
	justify-content: center;
	padding-top: 10upx;
}

.instruct {
	background: #e6e6e6;
	height: 10upx;
	width: 30upx;
	border-radius: 50upx;
	margin: 0 10upx;
}

.active {
	background: #fbae22 !important;
}
</style>