效果图:
一开始思路是使用swiper来实现上下滑的效果,并且在swiper-item里嵌套video,但是一直有莫名其妙的问题,后来在小程序API文档里也看到video无法在swiper中使用。转换思路改成监听用户上下滑,view上绑定如下事件
bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"
来判断用户是否上下滑
html部分:
<!--pages/index/index.wxml-->
<!-- start 视频区域 -->
<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 导航部分 -->
<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 导航部分 -->
<!-- start 详情区 -->
<cover-view class='detail'>
<!-- start 左侧详情区 -->
<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'>已出售</button>
</block>
</cover-view>
<!-- end 左侧详情区 -->
<!-- start 右侧love分享区 -->
<cover-view class='detailRight'>
<cover-view class='detailRightCon'>
<cover-view class='loveCon { {curCat.likeStatus==1?"active":""}}'
catchtap='likeEnt'><!-- 点击喜欢 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="袖虎宠物" class='shareBtn'>转发</button>
</cover-view>
<cover-view class='shareNum'>{ {curCat.shareNum}}</cover-view>
</cover-view>
</cover-view>
<!-- end 右侧love分享区 -->
<!-- start 底部导航 -->
<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></