小程序模仿抖音

效果图：

 

一开始思路是使用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></