使用的是这个组件3D流 | zebra-swiper (zebraui.com)，是在uniapp中使用，本文章是为了解决一些使用这个组件时的需求来创作的。
这个组件的功能是在uniapp上实现3d效果轮播图，效果可以，但是功能上差一些，需要我们自己来弥补。
首先是滑动的时候会出现因为惯性效果页面上显示的已经到第4个但是下标还在第三个的情况
<view class="content">
<z-swiper v-model="list" ref="zSwiper" :options="options" @sliderMove="sliderMove" @touch-end="touchEnd"
@touch-start="touchStart">
<z-swiper-item v-for="(item,index) in list" :key="index"
:style='index>=indexnum-1&&index<=indexnum+1?"opacity:1":"opacity:0"'
@click='topoverhaul(index)'>
<view class="box">
<image :src="item" mode="aspectFit"></image>
<view class="botimg2">
<image class="image2"
:src="index != indexnum?'/static/project/index/bot1.png':'/static/project/index/bo1t1.png'"
mode="aspectFill"></image>
<image class="image3" src='/static/project/index/quan.png' mode="aspectFill"
v-if='index == indexnum'></image>
<span class='indexname'>{{titlelist[index].name}}</span>
</view>
</view>
</z-swiper-item>
</z-swiper>
<image class="leftimg" src="/static/project/index/slide.png" mode="" @click="toleft"></image>
<image class="rightimg" src="/static/project/index/slide.png" mode="" @click="toright"></image>
</view>中间是图片结构，我们在切换地时候会去实现botimg2的选中状态切换
未来解决问题我们在互动开始和动画结束的时间分别做处理
移动开始的方法里我们记录下开始时的下标，在移动的时候进行更新
touchStart() {//移动开始的方法
this.oldindexnum = this.indexnum
//储存移动距离
this.traveldistance = this.$refs.zSwiper.swiper.getTranslate()
},
sliderMove(e) { // 中部拖动方法
if (this.indexnum != e.activeIndex) {
console.log('改变了');
this.oldindexnum = this.indexnum
this.indexnum = e.activeIndex
}
},过渡动画结束后
touchEnd(e) { //用来解决移动但是未触发的问题
let self = this
setTimeout(()=>{
console.log("swiper触摸结束了", e,e.activeIndex)
if (self.oldindexnum == self.indexnum) { //判断移动后是否发生改变 相等是未发生的状态
if (self.traveldistance < self.$refs.zSwiper.swiper.getTranslate()) { //向右
let num = self.$refs.zSwiper.swiper.getTranslate() - self.traveldistance
if (num > 2) { //这个是给他的容错，在这个容错内不会触发
if (self.indexnum > 0) {
self.oldindexnum = self.indexnum
self.indexnum--
if (uni.getSystemInfoSync().deviceType == 'tv') {//这个是因为要兼容多端设备
self.$refs.zSwiper.swiper.slideTo(self.indexnum, 10, false); //切换到第indexnum个slide，速度为0.1秒
}
}
}
} else {
let num = self.traveldistance - self.$refs.zSwiper.swiper.getTranslate()
if (num > 2) {
if (self.indexnum < self.titlelist.length - 1) {
self.oldindexnum = self.indexnum
self.indexnum++
if (uni.getSystemInfoSync().deviceType == 'tv') {
self.$refs.zSwiper.swiper.slideTo(self.indexnum, 10, false); //切换到第三个slide，速度为1秒
}
}
}
}
}else {//发生移动
if(e.activeIndex != self.indexnum){//出现惯性导致出错
self.indexnum = e.activeIndex
}
}
},1)
},这里的options是
options: { //中部轮播
effect: 'panorama',
slidesPerView: 1.54,
centeredSlides: true,
loop: false,
initialSlide: 1, //初始化的下标
panorama: {
depth: 10,
rotate: -25,
},
},
list: [ //轮播图片
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
],