⼩程序仿抖⾳视频之整屏上下切换功能的实现代码
效果演⽰：
WXML：
<view class="video_box">
<view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video_list" wx:for="{{video_list}}" data-index="{{index}}" wx:key="index" >  <text >{{index}}</text>
<video custom-cache="{{false}}" src="{{item.video_src}}" vslide-gesture-in-fullscreen="{{false}}" direction = '{{0}}' enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}" object-fit="cover"></video>
</view>
</view>
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;}
Page({
/**
* 页⾯的初始数据
*/
data: {
video_list:[
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'stream7.iqilu/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
{video_src:'stream7.iqilu/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
{video_src:'stream7.iqilu/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'stream7.iqilu/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
],
pageY:'',    // 触摸起始⾼度坐标
animation:'',  // 视频划动动画
up_stroke:false,// ture：上划；false：下划
difference:'', // 拖动的距离
windowHeight:'',// 屏幕⾼度
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
// 赋值：屏幕⾼度、
this.setData({
SystemInfoSync().windowHeight
})
},
// 划动起始坐标⽅法
touchStart(e){
// 开始坐标
this.setData({
uches[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,
});
this.setData({
animation: port(),    // 动画
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,
});
写文章的小程序
that.setData({
animation: port(),
up_stroke:false, // 重置划动状态
difference:0,  // 重置划动距离
})
}else{ // ⼤于1/4，移⾄拖动的下⼀个视频 --------------------------------
var animation = wx.createAnimation({ // 移动动效
duration: 200,
});
that.data.up_stroke ? n++ : n--;  // 上划：n+1 下划：n-1
that.setData({
animation: port(),
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;
}
}
},
})
总结
到此这篇关于⼩程序仿抖⾳视频之整屏上下切换功能的实现代码的⽂章就介绍到这了，更多相关⼩程序抖⾳视频整屏切换内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。