微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码
wxml
收藏
电话
关闭
@{{item.reallyName}}
{{item.workProvince}}{{item.workCity}}{{item.workCounty}}
{{item.projectContent}}
#{{item}}
wxss
/**index.wxss**/
page{
height: 100%;
}
.fl{
float:left;
}
.fr{
float: right;
}
.hide{
display: none !important;
}
.show{
display: block;
}
.videoBox{
overflow: hidden;
height: 100%;
position: relative;
}
.video{
width: 100%;
height: 100%;
display: block;
position: absolute;
top:0;
left: 0;
}
.transfrom{
transition: transform 0.6s ease-out;
}
.videoitem{
height: 100%;
background:#000000;
position: relative;
}
.videoitem video{
width: 100%;
height: 100vh;
}
.preImage{
display: block;
width: 100%;
}
/* 右侧按钮 */
.btnBox{
width: 100rpx;
position: absolute;
right: -2%;
bottom: -2%;
transform: translate(-50%,-50%);
}
.btnBox image{
display: block;
}
.btnBox view,.btnBox button{
margin-bottom: 50rpx;
}
.btnBox button{
padding: 0;
background: transparent;
}
.btnBox view image,.btnBox button image{
margin: 0 auto;
}
.btnBox view text,.btnBox button text{
line-height: 50rpx;
font-size: 24rpx;
color: #fff;
text-align: center;
}
.btnBox .btnTx{
position: relative;
}
.btnBox .btnTx .TX{
width: 94rpx;
height: 94rpx;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
}
.btnBox .btnTx .followAdd{
width: 39rpx;
height: 39rpx;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
border-radius:50%;
overflow: hidden;
}
.btnBox .btnCollect image{
width: 54rpx;
height: 52rpx;
}
.btnBox .btnShare image{
width: 54rpx;
height: 43rpx;
}
.btnBox .btnTelPhone image{
width: 45rpx;
height: 47rpx;
}
.btnBox .btnShut image{
width: 49rpx;
height: 49rpx;
}
/* 详情描述 */
.describe{
position: absolute;
width:75%;
left:5%;
bottom:12%;
}
.describe .nameAddr text{
font-size: 30rpx;
line-height: 58rpx;
color: #fff;
}
.describe .addr image{
width: 22rpx;
height: 28rpx;
margin: 15rpx 10rpx 0 0;
}
.describe .descText{
font-size: 28rpx;
color: #fff;
line-height: 38rpx;
}
.describe .labelS text{
float: left;
font-size: 28rpx;
color: #fff;
line-height: 48rpx;
margin-right: 10rpx;
}
slider{
display: 100%;
width: 100%;
position: absolute;
bottom: 8%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}js
Page({
/**
* 页面的初始数据
*/
data: {
videoDetail: '',
start: 0,
current: 0,
startTouch: '',
startNum:'0',
//其中的 视频url(videoUrl) 封面url(videoImageUrl) 头像url(headUrl) 的话大家自己填上就行
videoList: [{ "callState": "1", "projectContent": "老鼠炸飞了(ಡωಡ)hiahiahia", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝阳区", "quickProjectWorkerTagName": "电工,接线,砌墙,钢结构", "headUrl": "", "projectId": "6f1121611a17418cb5d3860b551c9e19", "createDate": "2019-08-22 19:06:39", "reallyName": "大发发", "videoImageUrl": "" }, { "callState": "1", "projectContent": "哒哒哒任汝芬", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝阳区", "quickProjectWorkerTagName": "工装,图纸,塔吊,外墙保温,刮腻子", "headUrl": "", "projectId": "d3b43f21b84b4a75a3321e478f73161f", "createDate": "2019-08-22 10:00:11", "reallyName": "大发发", "videoImageUrl": "" }, { "callState": "1", "projectContent": "韩剧发给他的的", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝阳区", "quickProjectWorkerTagName": "铺地板,杂工,管理", "headUrl": "", "projectId": "d0e07614d880472bb42937b5688a852f", "createDate": "2019-08-22 09:59:30", "reallyName": "大发发", "videoImageUrl": "" }, { "callState": "1", "projectContent": "感天动地凤阳花鼓过", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝阳区", "quickProjectWorkerTagName": "外架,浇筑,污水处理,打下手,工装", "headUrl": "", "projectId": "ec16ee6660fe4b1081135897eca2b72a", "createDate": "2019-08-22 09:59:02", "reallyName": "大发发", "videoImageUrl": "" }, { "callState": "1", "projectContent": "大地飞歌几句话", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝阳区", "quickProjectWorkerTagName": "管理,家装,工装,装修,维修,图纸,支模,外墙,塔吊,外墙保温", "headUrl": "", "projectId": "2cee997c843d419da30ca7d2a4aca955", "createDate": "2019-08-22 09:58:25", "reallyName": "大发发", "videoImageUrl": "" }], //接口返回的视频列表。
touch: false,
touchStartTime: 0, //触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0, // 单击事件点击后要触发的函数
lastTapTimeoutFunc: null,
switchTo:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var listTem = that.data.videoList;
for (var i = 0; i < listTem.length; i++) {
var arr = (listTem[i].quickProjectWorkerTagName).split(',')
// console.log(arr)
listTem[i].tagnamesArr = arr;
}
that.setData({
videoList: listTem
})
that.dataList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.videoContext = wx.createVideoContext('videoplayer');
this.setData({
updateState: true
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
dataList: function () {//加载数据
var that = this;
wx.request({
url: '',//把这里换成自己的接口地址
data: {
userId: '',
start: '',
limit: 5
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
console.log(res)
// console.log(res.data)
var listTem = that.data.videoList;
var dataList = res.data;
//添加新任务列表
that.setData({
videoList: listTem.concat(dataList)
})
if (res.data.length < 5) {
that.setData({
startNum: '0',
current:0
})
}
}
})
},
// 下面主要模仿滑动事件
touchstart: function (e) {
this.setData({
touchStartTime: e.timeStamp,
showGuide: false
})
let startTouch = e.changedTouches[0]
this.setData({
startTouch: startTouch,
touch: false
})
},
touchmove: function (e) {
let Y = e.changedTouches[0].pageY - this.data.startTouch.pageY;
},
touchend: function (e) {
this.setData({
touchEndTime: e.timeStamp
})
this.getDirect(this.data.startTouch, e.changedTouches[0])
},
touchcancel: function (e) {
this.getDirect(this.data.startTouch, e.changedTouches[0])
},
// 计算滑动方向
getDirect: function (start, end) {
var X = end.pageX - start.pageX,
Y = end.pageY - start.pageY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
console.log("left 2 right");
}
else if (Math.abs(X) > Math.abs(Y) && X < 0) {
console.log("right 2 left");
}
else if (Math.abs(Y) > Math.abs(X) && Y > 40) {
if (this.data.current > 0) {
this.setData({
touch: true,
transitionOver: false
})
this.pre()
} else {
this.setData({
current: 0
})
}
}
else if (Math.abs(Y) > Math.abs(X) && Y < -40) {
if (this.data.current < this.data.videoList.length - 2) {
this.setData({
touch: true
})
this.next()
} else {
var startNum = parseInt(this.data.startNum) + 5;
this.setData({
startNum: startNum,
})
this.dataList();
this.setData({
current: this.data.videoList.length - 1
})
}
}
},
// 播放上一个
pre: function () {
this.setData({
current: this.data.current - 1,
})
},
// 播放下一个
next: function () {
this.setData({
current: this.data.current + 1,
})
},
//点击暂停/开始
videoTap: function () {
//获取video
this.videoContext = wx.createVideoContext('videoplayer')
if (this.data.play) {
//开始播放
this.videoContext.play()//开始播放
this.setData({
play: false
})
} else {
//当play==false 显示图片 暂停
this.videoContext.pause()//暂停播放
this.setData({
play: true
})
}
},
//播放条时间改表触发
videoUpdate(e) {
if (this.data.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
let sliderValue = e.detail.currentTime / e.detail.duration * 100;
this.setData({
sliderValue: sliderValue,
duration: e.detail.duration
})
}
},
sliderChanging(e) {
this.setData({
updateState: false //拖拽过程中，不允许更新进度条
})
},
//拖动进度条触发事件
sliderChange(e) {
if (this.data.duration) {
this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖动后，计算对应时间并跳转到指定位置
this.setData({
sliderValue: e.detail.value,
updateState: true //完成拖动后允许更新滚动条
})
}
},
})
在对应的页面添加json
{
"navigationBarTitleText": "视频详情",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"disableScroll": true
}希望可以帮助到各位小伙伴，希望对大家有用！！！