uniapp制作小程序产品详情页面swiper带缩略图点击小图切换大图

写在前面：老菜鸟这都是笨方法，高手和大神就不要看了。

uniapp里面的swiper默认是没有小图功能的，即使用了那个插件也只是可以自定义下面那些小圆点的形状而已。

而点击小图切换大图则经常用于ＰＣ端的网站上。有的还带放大镜的效果。

现在客户想在小程序上也具有这样的效果。该怎么处理呢？

经过一番摸索：我的实现思路是：在页面上放置两个swiper通过同步current的值来实现点击小图切换大图，和在切换大图的时候给对应的小图加高亮类。

下面我直接把整个代码贴出来吧。一段一段的贴也不像ＨＴＭＬ那样容易理解。

<template>
	<view class="page">
		<!-- 幻灯 -->
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<uni-swiper-dot :info="productPics" :current="current" :mode="mode" autoplay="true" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper datu" @change="change" :current="current" autoplay="true">
						<swiper-item v-for="(ban,index) in productPics" :key="index">
							<view class="swiper-item uni-bg-red">
								<image :src="ban" class="pro_image"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<swiper class="swiper xiaotu" display-multiple-items="4" :current="xiaotu_current">
					<swiper-item v-for="(ban,index) in productPics" :key="index" @click="bigpic(index)">
						<view class="swiper-item uni-bg-red">
							<image :src="ban" class="pro_image" :class="[index == current ? 'active' : '']"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		data() {
			return {
				productPics: [],
				current: 0,　//这里是关键
				xiaotu_current:0, //这里是关键
				mode: 'round',
				dotsStyles: {
					bottom: 20,
					backgroundColor: '#fff',
					border: 'none',
					selectedBackgroundColor: 'rgba(255,255,255,0.5)',
					selectedBorder: 'none'
				},
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: "产品详情"
			});
			uni.request({
				url: '写上你的请求地址',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.productPics = res.data.proinfo.xiangce;
				},
				fail: () => {},
				complete: () => {}
			});
		
		},
		methods: {
			//大图变换控制小图当前类
			change(e) {
				this.current = e.detail.current;
				if(e.detail.current > 3){
					this.xiaotu_current = 1;
				}else if(e.detail.current > 6){
					this.xiaotu_current = 2;
				}else{
					this.xiaotu_current = 0;
				}
			},
			//点击小图切换指定大图
			bigpic(index){
				this.current = index;
			}
		},
		components: {
			uniSwiperDot,
			uniIcons
		}
	}
</script>

<style>
.datu{
	width: 100%;
	height:562upx;
}
.datu .pro_image{
	width: 100%;
	height: 562upx;
}
.xiaotu{
	padding: 10px 10px 10px 5px;
	height:140upx;
}
.xiaotu .pro_image{
	width:160upx;
	height: 120upx;
	margin-left: 5px;
	margin-right: 5px;
	border: 1px solid #fff;
	padding:2px;
}
.xiaotu .pro_image.active{
	border-color: #ff6600;
}
</style>