适用于微信小程序的视频滑动切换组件（H5改后即可使用）。之前使用过小程序提供的video-swiper组件，里面的问题和bug就不过多描述了。向上。为了项目进度，当时并没有想太多。我没有使用video-swiper，只是简单的用swiper和swiper-item实现了功能。后来发现有问题，但是客户没有反馈，测试也没有提bug。所以这个问题就拖延了，现在抽空再写个demo，以后遇到类似项目的时候再拿出来修改。新写的demo是参考之前用过的轮播组件的思路做的一个视频滑动切换组件。如有其他问题，请不要吝啬指出，谢谢！或者直接上代码！！！//index.tsconstrandomColor:string[]=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9']interfaceBaseEventextendsWechatMiniprogram.BaseEvent{touches:Array}Page({/***page初始数据*/data:{distance:0,list:>[],windowInfo:{},},loadMoreColor(){if(this.loading)returnthis.loading=true//视频集合letlist=['']//for(leti=0;i<10;i++){//letcolor='#'//for(letn=0;n<6;n++){//color+=randomColor[Math.floor(Math.random()*randomColor.length)]//}//console.log(color);//list.push(color)//}setTimeout(()=>{this.setData({list:[...this.data.list,...list]},()=>{this.currentIndex===0&&this.createVideoContext()this.loading=false})},2000);},createVideoContext(){this.videoExample&&this.videoExample.stop&&this.videoExample.stop()this.videoExample=wx.createVideoContext(`video_${this.currentIndex}`)this.videoExample.play()},videoExample:|null>null,//videoinstanceloading:false,//数据加载currentIndex:0,//当前swiperstartLocation:0,//FingerdownpositionendLocation:0,//FingeruppositionisTouchmove:false,//是否有滑动操作inertiaRollState:true,//惯性滚动效果是否结束truefalse未结束//Touchstarttouchstart(e:BaseEvent){if(!this.inertiaRollState)return//记录初始位置slidingthis.startLocation=e.touches[0].clientY},//触摸移动touchmove(e:BaseEvent){//如果滑动器当前位置为0且为下拉动作if((this.currentIndex<=0&&e.touches[0].clientY-this.startLocation>0)||!this.inertiaRollState)return;console.log('touchmove');this.isTouchmove=truethis.endLocation=e.touches[0].clientY//e.touches[0].clientY-this.startLocation手指滑动的距离//this.currentIndex*this.data.windowInfo.screenHeightalreadyRollupdistance//distance总的rollupdistanceletdistance=e.touches[0].clientY-this.startLocation-(this.currentIndex*this.data.windowInfo.screenHeight)this.setData({distance:this.currentIndexthis.currentIndex*this.data.windowInfo.screenHeight+50?-(this.currentIndex*this.data.windowInfo.screenHeight+50):distance})},//Touchendtouchend(){//moveDistance手指滑动距离大于0时（moveState为true）为下拉，小于0时（moveState为false）,是上拉letmoveDistance=this.endLocation-this.startLocationletmoveState=moveDistance>0this.endLocation=0this.startLocation=0//如果滑动器当前位置为0，是上拉向下动作if((this.currentIndex<=0&&moveState)||!this.isTouchmove)返回;is.isTouchmove=falsethis.inertiaRollState=false//手指滑动距离不小于1/4，swiper进行切换if(Math.abs(moveDistance)>=this.data.windowInfo.screenHeight/4){let当前索引=移动状态？this.currentIndex-1:this.currentIndex+1if(currentIndex{//下拉值越来越大（离负无穷大越来越近0)上拉值越来??越小（负无穷大）let_d=moveState?this.data.distance+baseNum:this.data.distance-baseNumif((moveState&&_d>=distance)||(!moveState&&_d<=distance)){//滑动开关完成this.setData({distance},()=>{swiper&&this.createVideoContext()this.inertiaRollState=true})clearInterval(intervalId)}else{this.setData({distance:_d})}},10)},/***生命周期功能--监控页面加载*/onLoad(){this.setData({windowInfo:wx.getWindowInfo()})this.loadMoreColor();}})加载中.../**index.wxss**/.container{width:100%;overflow:hidden;.list-view{.list-item{width:100%;height:100%;display:flex;align-items:center;}}}
