首页 >> js开发 >> js微信小程序仿抖音视频之整屏上下切换功能的实现代码js大全

js微信小程序仿抖音视频之整屏上下切换功能的实现代码js大全

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

效果演示：WXML：

WXSS：
.video_box{width: 100%;height: auto;position: fixed;top:0;bottom: 0;background-color: #000;}
.video_list{width: 100%;height: 100vh;position: relative;}
.video_list video{position: absolute;top:50%;margin-top:-30vw; width: 100%;height:56vw;padding: 0;}
.video_box{width: 100%;height: auto;position: fixed;top:0;bottom: 0;background-color: #000;}
.video_list{width: 100%;height: 100vh;position: relative;}
.video_list video{position: absolute;top:50%;margin-top:-30vw; width: 100%;height:56vw;padding: 0;}
Page({
/**

* 页面的初始数据

*/
data: {

video_list:[

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/17/c292033ef110de9f42d7d539fe0423cf.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218025702PSiVKDB5ap.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/18/2fca1c77730e54c7b500573c2437003f.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218114723HDu3hhxqIT.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218025702PSiVKDB5ap.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/17/c292033ef110de9f42d7d539fe0423cf.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218114723HDu3hhxqIT.mp4'},

],

pageY:'',
// 触摸起始高度坐标

animation:'',
// 视频划动动画

up_stroke:false,// ture:上划；false：下划

difference:'', // 拖动的距离

windowHeight:'',// 屏幕高度
},
/**

* 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 赋值：屏幕高度、

this.setData({

windowHeight:wx.getSystemInfoSync().windowHeight

})
},
// 划动起始坐标方法
touchStart(e){

// 开始坐标

this.setData({

pageY:e.touches[0].pageY,

})
},
// 划动过程坐标方法
touchMove(e){

let n = e.currentTarget.dataset.index;
// 触摸的第几个序号

let difference = e.touches[0].pageY - this.data.pageY; // 移动后和起始值的差值

if(this.is_continue(n,difference)){
// 判断是否到底

return;

}

// 划动动画 -------------------------------------

var animation = wx.createAnimation({
// 移动动效

duration: 0,

});

animation.top(difference - (n*this.data.windowHeight)).step()

this.setData({

animation: animation.export(),
// 动画

up_stroke:difference > 0 ? false : true, // 是否上划,

difference:difference,
// 拖动的距离

})
},
// 划动结束坐标方法
touchEnd(e){

let n = e.currentTarget.dataset.index;

let difference = this.data.difference; // 拖动的距离

if(this.is_continue(n,difference)){

return;

}

const windowHeight = this.data.windowHeight;
// 屏幕高度

let that = this;

// 根据id获取点击元素距顶部高度

var query = wx.createSelectorQuery();

let id = '#' + e.currentTarget.id;

query.select(id).boundingClientRect(function (rect) { // 获取高度

if(Math.abs(difference) <= windowHeight /7){
// 小于1/7回原位置 ---------------------------

var animation = wx.createAnimation({ // 移动动效

duration: 100,

});

animation.top(-(n * windowHeight)).step()

that.setData({

animation: animation.export(),

up_stroke:false, // 重置划动状态

difference:0,
// 重置划动距离

})

}else{ // 大于1/4，移至拖动的下一个视频 --------------------------------

var animation = wx.createAnimation({ // 移动动效

duration: 200,

});

that.data.up_stroke ? n++ : n--;
// 上划：n+1 下划：n-1

animation.top(-(n * windowHeight)).step()

that.setData({

animation: animation.export(),

up_stroke:false, // 重置划动状态

difference:0,
// 重置划动距离

})

}

}).exec();
},
// 判断是否到底
is_continue(n,difference){

if(difference < 0){ // 上划

if(n == this.data.video_list.length - 1){ // 最后一个视频，提示到底

if(difference < -20){

wx.showToast({

title: '已经到底了~~',

icon:'none',

duration:1000

})

}

return true;

}

}else{

if(n == 0){

if(difference > 20){

wx.showToast({

title: '上面没有了~~',

icon:'none',

duration:1000

})

}

return true;

}

}
},
})
Page({
/**

* 页面的初始数据

*/
data: {

video_list:[

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/17/c292033ef110de9f42d7d539fe0423cf.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218025702PSiVKDB5ap.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/18/2fca1c77730e54c7b500573c2437003f.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218114723HDu3hhxqIT.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218025702PSiVKDB5ap.mp4'},

{video_src:'https://stream7.iqilu.com/10339/article/202102/17/c292033ef110de9f42d7d539fe0423cf.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218093206z8V1JuPlpe.mp4'},

{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202102/18/20210218114723HDu3hhxqIT.mp4'},

],

pageY:'',
// 触摸起始高度坐标

animation:'',
// 视频划动动画

up_stroke:false,// ture:上划；false：下划

difference:'', // 拖动的距离

windowHeight:'',// 屏幕高度
},
/**

* 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 赋值：屏幕高度、

this.setData({

windowHeight:wx.getSystemInfoSync().windowHeight

})
},
// 划动起始坐标方法
touchStart(e){

// 开始坐标

this.setData({

pageY:e.touches[0].pageY,

})
},
// 划动过程坐标方法
touchMove(e){

let n = e.currentTarget.dataset.index;
// 触摸的第几个序号

let difference = e.touches[0].pageY - this.data.pageY; // 移动后和起始值的差值

if(this.is_continue(n,difference)){
// 判断是否到底

return;

}

// 划动动画 -------------------------------------

var animation = wx.createAnimation({
// 移动动效

duration: 0,

});

animation.top(difference - (n*this.data.windowHeight)).step()

this.setData({

animation: animation.export(),
// 动画

up_stroke:difference > 0 ? false : true, // 是否上划,

difference:difference,
// 拖动的距离

})
},
// 划动结束坐标方法
touchEnd(e){

let n = e.currentTarget.dataset.index;

let difference = this.data.difference; // 拖动的距离

if(this.is_continue(n,difference)){

return;

}

const windowHeight = this.data.windowHeight;
// 屏幕高度

let that = this;

// 根据id获取点击元素距顶部高度

var query = wx.createSelectorQuery();

let id = '#' + e.currentTarget.id;

query.select(id).boundingClientRect(function (rect) { // 获取高度

if(Math.abs(difference) <= windowHeight /7){
// 小于1/7回原位置 ---------------------------

var animation = wx.createAnimation({ // 移动动效

duration: 100,

});

animation.top(-(n * windowHeight)).step()

that.setData({

animation: animation.export(),

up_stroke:false, // 重置划动状态

difference:0,
// 重置划动距离

})

}else{ // 大于1/4，移至拖动的下一个视频 --------------------------------

var animation = wx.createAnimation({ // 移动动效

duration: 200,

});

that.data.up_stroke ? n++ : n--;
// 上划：n+1 下划：n-1

animation.top(-(n * windowHeight)).step()

that.setData({

animation: animation.export(),

up_stroke:false, // 重置划动状态

difference:0,
// 重置划动距离

})

}

}).exec();
},
// 判断是否到底
is_continue(n,difference){

if(difference < 0){ // 上划

if(n == this.data.video_list.length - 1){ // 最后一个视频，提示到底

if(difference < -20){

wx.showToast({

title: '已经到底了~~',

icon:'none',

duration:1000

})

}

return true;

}

}else{

if(n == 0){

if(difference > 20){

wx.showToast({

title: '上面没有了~~',

icon:'none',

duration:1000

})

}

return true;

}

}
},
})总结总结总结

原文地址：http://www.chinasgp.cn/article/4406.html

上一条：« js如何在vue中使用百度地图添加自定义覆盖物（水波纹）js大全

下一条：js正则{2,6},js正则表达式 »

标签:

抖音小程序 js 微信微信小程序

js微信小程序仿抖音视频之整屏上下切换功能的实现代码js大全-js开发