使用的是这个组件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',
				],

在onloade里判断总体的长度有没有超过3个，不然要改初始化下标