小程序模仿抖音

本文主要是介绍小程序模仿抖音，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

 

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

这篇关于小程序模仿抖音的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---