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

写在前面：老菜鸟这都是笨方法，高手和大神就不要看了。
uniapp里面的swiper默认是没有小图功能的，即使用了那个插件也只是可以自定义下面那些小圆点的形状而已。
而点击小图切换大图则经常用于ＰＣ端的网站上。有的还带放大镜的效果。
现在客户想在小程序上也具有这样的效果。该怎么处理呢？
经过一番摸索：我的实现思路是：在页面上放置两个swiper通过同步current的值来实现点击小图切换大图，和在切换大图的时候给对应的小图加高亮类。
下面我直接把整个代码贴出来吧。一段一段的贴也不像ＨＴＭＬ那样容易理解。

.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; }

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