Effect picture:
At first, the idea was to use swiper to achieve the effect of ups and downs, and to nest video in swiper-item, but there have been inexplicable problems. Later, in the applet API document, I also saw that video cannot be used in swiper. The conversion idea is changed to monitor users going up and down, and the following events are bound to the view
bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"
To determine whether the user is going up or down
html part:
<!--pages/index/index.wxml-->
<!-- start video area-->
<view class='middle' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
<view class='videoBox' style='height:100%;width:100%'>
<video style='height:100%;width:100%' src="{ {curvideo}}" controls='false' autoplay="true" id='video0' loop="true" bindtap='pauseVideo' bindtimeupdate="videoProgress">
<!-- start navigation section-->
<cover-view class='navBtns'>
<block wx:for="{ {typeList}}" wx:for-item="item" wx:for-index="index" >
<cover-view class='{ {index==typeChooseIndex?"active":""}} typeButton' data-index='{ {index}}' catchtap='styleClick'>
{ {item.name}}</cover-view>
</block>
<cover-view class='colorBtns'>
<block wx:for="{ {colorList}}" wx:for-item="item" wx:for-index="index" >
<cover-view class='{ {index==colorChooseIndex?"active":""}} colorbutton' data-index="{ {index}}" catchtap='colorClick' >{ {item.colorName}}</cover-view>
</block>
</cover-view>
</cover-view>
<!-- end navigation section -->
<!-- start details area-->
<cover-view class='detail'>
<!-- start left detail area -->
<cover-view class='detailLeft'>
<cover-view class='catCon'>
<cover-view>#品种：{ {curCat.typeName}}</cover-view>
<cover-view>#颜色：{ {curCat.colorName}}</cover-view>
</cover-view>
<block wx:if="{ {curCat.saleStatus==1}}">
<button class='reserve' data-catid="{ {curCat.id}}" catchtap='goreserve'>继续支付</button>
</block>
<block wx:if="{ {curCat.saleStatus==2}}">
<button class='reserve' data-catid="{ {curCat.id}}" catchtap='goreserve'>立即预订</button>
</block>
<block wx:else>
<button class='sold'>Sold</button>
</block>
</cover-view>
<!-- end Details area on the left -->
<!-- start the love sharing area on the right-->
<cover-view class='detailRight'>
<cover-view class='detailRightCon'>
<cover-view class='loveCon { {curCat.likeStatus==1?"active":""}}'
catchtap='likeEnt'><!-- Click to like active-->
<cover-image src='../images/love1.png'></cover-image>
<cover-image src='../images/love2.png'></cover-image>
</cover-view>
<cover-view class='loveNum'>{ {curCat.likeNum}}</cover-view>
<cover-view class='shareCon'>
<cover-image src='../images/shareIcon.png'></cover-image>
<button open-type='share' title="Sleeve Tiger Pet" class='shareBtn'>Forward</button>
</cover-view>
<cover-view class='shareNum'>{ {curCat.shareNum}}</cover-view>
</cover-view>
</cover-view>
<!-- end love sharing area on the right -->
<!-- start bottom navigation-->
<cover-view class='bottom clear' catchtap=''>
<cover-view class='vProgress' style='width:{ {vProgress}}%'></cover-view>
<cover-view class='bottomBorder'></cover-view>
<button class='active'>首页</button>
<cover-view class='space'></cover-view>
<button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" catchtap='goCenter'>我的</button>
</cover-view>
<!-- end bottom navigation-->
</cover-view>
<!-- end details area -->
<!--start operation prompt-->
<cover-view class='mask { {maskStatus}}' catchtap='closeMask'>
<cover-image src='../images/type2.png' class='tipTop'></cover-image>
<cover-image src='../images/up2.png' class='tipBottom'></cover-image>
</cover-view>
<!--start operation prompt-->
<!-- start video play button-->
<cover-view class='videoBtn { {videoBtnStatus}}' catchtap='playVideo'>
<cover-image src='../images/pause.png' class='videoBtnIcon'></cover-image>
</cover-view>
<!-- end video play button-->
</video>
</view>
</view>
<!-- end video area -->
css part:
/* pages/index/index.wxss */
page{
width: 100%;
height: 100%;
background: #000;
}
swiper,swiper-item{
width: 100%;
height: 900rpx;
}
.videoCon,video{
width: 100%;
height: 100%;
overflow: hidden;
}
.videoCon{
margin-top: 130rpx;
}
.navBtns {
padding-top: 65rpx;
padding-left: 20rpx;
position: fixed;
top: 0rpx;
height: 150rpx;
z-index: 999;
width: 100%;
}
.navBtns .typeButton{
background:rgba(255, 255, 255, 0.5);
display:inline-block;
font-size:14px;
line-height:25px;
width:40px;
height:25px;
margin:2px 5px;
border-radius:5px;
text-align:center;
margin-bottom: 10rpx;
}
.navBtns .typeButton.active{
background: #d82539;
color: #fff;
}
.colorBtns .colorbutton{
display: inline-block;
background: none;
color: rgb(36, 36, 36);
/* border: 1px solid #fff; */
box-shadow: none;
outline: none;
font-size: 24rpx;
/* padding: 5rpx 8rpx; */
padding: 3rpx;
border-radius: 10rpx;
margin:5px 5px;
line-height: 30rpx;
border: 1px solid #fff;
background:rgba(235, 235, 235, 0.5);
text-align: center;
}
.colorBtns .colorbutton.active{
background: none;
border: 1px solid #ffffff;
background:rgba(207, 206, 206, 0.5);
background: #d82539;
color: #fff;
}
.colorBtns .colorbutton::after,.colorbutton .button::before{
border: none;
}
.detailRightCon{
float: right;
margin-right: 10rpx;
width: 80rpx;
height: 220rpx;
overflow: hidden;
}
.loveCon{
width: 180rpx;
height: 60rpx;
}
.loveCon.active{
margin-left: -80rpx;
}
.loveCon cover-image{
float: left;
width: 80rpx;
height: 60rpx;
}
.shareNum, .loveNum {
clear: both;
color: #fff;
font-size: 30rpx;
font-weight: bold;
text-align: center;
padding-right: 5rpx;
}
.shareCon{
height:60rpx;
margin-top: 20rpx;
position: relative;
}
.shareCon cover-image{
width: 77rpx;
height: 62rpx;
}
.shareNum {
display: block;
height: 50rpx;
}
.detailLeft{
float: left;
margin-top: 50rpx;
margin-bottom: 40rpx;
}
.detailRight{
float: right;
}
.catCon{
font-size: 28rpx;
color: #fff;
padding-left: 30rpx;
}
.clear{
clear: both;
}
.catCon button{
display: inline-block;
background: none;
padding: 0px;
font-size: 28rpx;
color: #fff;
line-height: 30rpx;
border-radius: 0rpx;
border: 0rpx;
}
.catCon button::after{
border: none;
}
.catCon{
margin-bottom: 10rpx;
}
.catCon>cover-view{
padding-left: 0rpx;
}
.reserve{
font-size: 28rpx;
background: #f3243b;
color: #fff;
margin-left: 30rpx;
margin-top: 40rpx;
}
.sold{
font-size: 28rpx;
background: #ccc;
color: #fff;
margin-left: 30rpx;
margin-top: 40rpx;
}
.detail{
width: 100%;
position: fixed;
left: 0rpx;
bottom: -2rpx;
height: 360rpx;
}
.bottom button{
width: 50%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: none;
color: #ccc;
float: left;
font-size: 30rpx;
border-radius: 0rpx;
border-left: 0rpx;
border-right: 0rpx;
border: none;
}
.bottom button::after{
border: none;
border-radius: 0rpx;
/* border-top: 1rpx solid #fff; */
}
.bottom button.active{
/* border-right: 1rpx solid rgba(0, 0, 0, 0.1); */
border-bottom: 2rpx solid #d82539;
font-weight: bold;
color: #d82539;
}
.shareBtn,.shareBtn::after{
background: none;
display: block;
border: none;
outline: none;
height: 120rpx;
width: 90rpx;
line-height:300rpx;
position: absolute;
z-index: 999;
top: 0rpx;
}
.shareBtn .wx-button-cover-view-inner{
height: auto;
overflow: auto;
}
.bottom{
width: 100%;
position: absolute;
bottom: 0rpx;
background: rgba(0, 0, 0, 1);
height: 80rpx;
/* border-top: 1rpx solid rgba(241, 241, 241,0.4); */
}
.bottomBorder{
clear: both;
border-top: 2rpx solid rgba(241, 241, 241,0.4);
}
.videoOut {
position: fixed;
top: 0rpx;
left: 0rpx;
height: 100%;
width: 100%;
}
.bottom .space{
width: 2rpx;
background: rgba(241, 241, 241,0.4);
height:30rpx;
position:absolute;
margin-top:22rpx;
margin-left: 50%;
}
.middle{
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
.videoBox {
background: #000;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 999;
top: 0rpx;
}
.tipTop {
width:238rpx;
height:225rpx;
position:absolute;
top:43rpx;
left:99rpx;
}
.tipBottom {
width:560rpx;
height:317rpx;
position:absolute;
bottom:513rpx;
left:50%;
margin-left:-280rpx;
}
.videoBtn {
width: 100%;
height: 200rpx;
position: fixed;
top: 615rpx;
z-index: 999;
}
.videoBtnIcon {
width: 120rpx;
height: 100rpx;
display: block;
margin: 0 auto;
}
.vProgress{
height: 2rpx;
background: red;
}
js part:
// pages/index/index.js
const app = getApp();
var videopage = 0;
got up;
have down;
Page({
/**
* Initial data of the page
*/
data: {
videoList: [],
curvideo: '',
issold: true,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
isnew: true,
typeList: [],
colorList: [],
catList: [],
typeChooseIndex: 0,
colorChooseIndex: 0,
curCat: {},
video index: 0,
videoH: 700,
maskStatus: 'hide',
videoBtnStatus:'hide'
},
curColorType:'', //Selected color
curTypeCode:'', //Selected type
page: 1, //The first few pages
pageSize: 20, //Display quantity per page
openId: app.openId,
isEnd :false,
isAjax: false,
noDataTip:'No data yet, switch a label',
/**
* Life cycle function-monitor page loading
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({//Adaptation
success: function (res) {
console.info("版本号", +res.SDKVersion.replace(/\./g, ""));
if (+res.SDKVersion.replace(/\./g, "")<=210){
wx.showToast({
title:'Your current WeChat version is too low, some functions are not supported, please upgrade to the latest WeChat version',
icon: 'none',
duration: 10000
})
}
var isPlus = res.model.search("Plus");
var isX = res.model.search("iPhone X");
var ipad = res.model.search("iPad");
if (isX != -1) {
that.setData({
videoH: 1000
})
}
if (isPlus! = -1) {
that.setData({
videoH: 800
})
}
if (ipad != -1) {
that.setData({
videoH: 400
})
}
}
})
var that = this;
if (!that.openId) {
that.openId = app.openId
}
app.getDate('api/wechat/queryLabel', {}, function (data) {
var d = data.data;
that.setData({
typeList: data.data,
colorList: d[0].listColor
});
});
that.queryCatList();
//The user displays the operation prompt for the first time
try {
const isfirst = wx.getStorageSync('first');
if (isfirst == 1) {
that.setData({
maskStatus: 'hide'
})
}else{
wx.setStorageSync('first', 1);
that.setData({
maskStatus: 'show'
})
}
} catch (e) {
console.info (e);
}
},
/**
* The user clicks on the upper right corner to share
*/
onShareAppMessage: function () {
this.btnshare();
return {
title: app.data.shareTitle,
path: app.data.sharePath,
}
},
videowait: function () {
wx.showLoading({
title: "Loading desperately...",
})
},
goreserve: function (e) {
var id = e.target.dataset.catid;
wx.navigateTo({
url: '../reserve/reserve?id=' + id
})
},
bindGetUserInfo (e) {
var that = this;
console.log(e.detail.userInfo);
if (!!e.detail.userInfo) {
const userInfo = e.detail.userInfo;
try {
wx.setStorageSync('userInfo', userInfo);
} catch (e) {
console.info (e);
}
that.setData({
isnew: false
})
wx.navigateTo({
url: '../center/center',
})
} else {
that.setData({
isnew: true
})
wx.showToast({
title:'Authorization failed',
icon: 'none',
duration: 2000
})
console.info("Authorization failed")
}
},
goCenter: function () {
if (!wx.canIUse('button.open-type.getUserInfo')) {
wx.showToast({
title:'Please upgrade WeChat version',
icon: 'none',
duration: 2000
})
}
},
btnshare: function () {
var that = this;
//that.onShareAppMessage;
that.data.curCat.shareNum = that.data.curCat.shareNum + 1;
that.setData({
curCat: that.data.curCat
});
app.getDate('api/wechat/share/' + that.data.curCat.id + '.do', {});
},
/**
* The above style click event
*/
styleClick: function (e) {
var index = e.target.dataset.index;
var that = this;
var curTypeinfo=that.data.typeList[index];
console.info(index, curTypeinfo, curTypeinfo.listColor);
that.setData({
colorList:curTypeinfo.listColor,
typeChooseIndex:index,
colorChooseIndex: 0
});
videopage=0;
that.curColorType = '';
that.curTypeCode = !curTypeinfo.typeCode ? '' : curTypeinfo.typeCode;
that.data.catList=[];
that.page = 1;
that.isEnd = false;
that.queryCatList();
that.videoPlay(1);
//console.info(e.target.dataset);
},
colorClick: function (e) {
var index = e.target.dataset.index;
var that = this;
var curTypeinfo = that.data.typeList[that.data.typeChooseIndex] ;
var curColor = curTypeinfo.listColor[index];
console.info (curTypeinfo, curColor);
that.curColorType = curColor.colorCode;
that.curTypeCode = curTypeinfo.typeCode;
that.page = 1;
that.setData({
colorChooseIndex: index
})
videopage=0;
that.data.catList = [];
that.page = 1;
that.isEnd = false;
that.queryCatList();
// that.queryCatList();
//console.info(e.target.dataset);
that.videoPlay(1);
},
likeEnt: function (e) {
var that = this;
var curCat = that.data.curCat;
if (curCat.likeStatus == 1) {
curCat.likeStatus = 0;
curCat.likeNum = curCat.likeNum> 0? curCat.likeNum - 1: 0;
} else {
curCat.likeStatus = 1;
curCat.likeNum = curCat.likeNum + 1;
}
that.setData({
catList: that.data.catList,
curCat: curCat
})
app.getDate('api/wechat/updateLike.do', {
catId: curCat.id,
openId: that.openId,
status: curCat.likeStatus
});
},
queryCatList: function () {
var that = this;
if(that.isEnd){
return ;
}
app.getDate ('api / wechat / queryVideoCat', {
typeCode: that.curTypeCode,
colorCode: that.curColorType,
page: that.page,
openId: that.openId,
rows: that.pageSize
}, function (data) {
that.page++;
var d = data.data;
if (!d || d.length <= 0) {
that.isEnd=true;
if (that.data.catList.length>0){
videopage=0;
var catList = that.data.catList;
that.setData({
curCat: catList [videopage],
curvideo: catList[videopage].attaEntity[0].url
});
return ;
}
wx.showToast({
title: that.noDataTip,
icon: 'none',
duration: 2000
})
return ;
} else {
if(d.length<that.pageSize){
that.isEnd=true;
}
var tdata=that.data.catList.concat(d);
that.setData({
catList: tdata ,
curCat: tdata [videopage],
curvideo: tdata[videopage].attaEntity[0].url
})
}
});
},
//Touch start event
touchstart: function (e) {
var that = this;
//console.log(e.touches[0].clientY)
that.setData({
touchstartY: e.touches[0].clientY
})
this.data.touchstartY = e.touches[0].clientY;
up = false;
down = false;
},
//Touch mobile event
touchmove: function (e) {
// console.log(e)
let touchendY = e.touches[0].clientY;
let touchstartY = this.data.touchstartY;
//Swipe up
if (touchendY - touchstartY <= -40) {
console.log("Slide up");
up = true;
down = false;
}
//Swipe down
if (touchendY - touchstartY >= 40) {
console.log("Slide down");
up = false;
down = true;
}
},
//Touch end event
touchend: function (e) {
var that = this;
var videoList = that.data.catList;
if (up === true) {
if (videopage >= videoList.length - 1) {
if(that.isEnd){ //If it is over
if (videoList.length <= 0) {
wx.showToast({
title: that.noDataTip,
icon: 'none',
duration: 2000
});
return;
} else {
videopage = 0;
}
}else{ //If it is not over yet, load the next one
videopage++;
that.queryCatList();
return ;
}
} else {
videopage++;
}
}
if (down === true) {
if (videopage == 0) {
if (videoList.length>0){
videopage = videoList.length-1 ;
}else{
wx.showToast({
title: that.noDataTip,
icon: 'none',
duration: 2000
})
return;
}
} else {
videopage--;
}
}
var curCat = videoList [videopage];
that.setData({
curvideo: curCat.attaEntity [0] .url,
curCat: curCat
});
up = false;
down = false;
that.videoPlay(1);
},
//Close the operation prompt
closeMask:function(){
var that = this;
that.setData({
maskStatus: 'hide'
})
},
//Video pause and play package status: 1 play 2 pause
videoPlay: function (status) {
console.info(status);
var that = this;
var v = wx.createVideoContext("video0");
if (status == 1){//play
v.play();
that.setData({
videoBtnStatus: 'hide'
})
} else if (status == 2){//pause
v.pause();
that.setData({
videoBtnStatus:'show'
})
}
},
pauseVideo:function(){
var that = this;
that.videoPlay(2);
},
playVideo:function(){
var that = this;
that.videoPlay(1);
},
videoProgress: function (e) {
var that = this;
console.info(e.detail.duration, e.detail.currentTime);
var duration = e.detail.duration;
var currentTime = e.detail.currentTime;
var progress = currentTime / duration*100;
that.setData({
vProgress: progress
})
}
});