本文主要是介绍小程序模仿抖音，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
一开始思路是使用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
这篇关于小程序模仿抖音的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
