欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序模仿抖音

程序员文章站 2022-07-03 21:13:50
效果图:一开始思路是使用swiper来实现上下滑的效果,并且在swiper-item里嵌套video,但是一直有莫名其妙的问题,后来在小程序API文档里也看到video无法在swiper中使用。转换思路改成监听用户上下滑,view上绑定如下事件bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="t......

效果图:

小程序模仿抖音

 

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

<button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" catchtap='goCenter'>我的</button>

</cover-view>

<!-- end 底部导航 -->

</cover-view>

<!-- end 详情区 -->

<!--start 操作提示 -->

<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 操作提示 -->

<!-- start 视频播放按钮 -->

<cover-view class='videoBtn {{videoBtnStatus}}' catchtap='playVideo'>

<cover-image src='../images/pause.png' class='videoBtnIcon'></cover-image>

</cover-view>

<!-- end 视频播放按钮 -->

</video>

</view>

</view>

<!-- end 视频区域 -->


css部分:

/* 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部分:

// pages/index/index.js

const app = getApp();

var videopage = 0;

var up;

var down;

Page({

 

/**

* 页面的初始数据

*/

data: {

videoList: [ ],

curvideo: '',

issold: true,

canIUse: wx.canIUse('button.open-type.getUserInfo'),

isnew: true,

typeList: [],

colorList: [],

catList: [],

typeChooseIndex: 0,

colorChooseIndex: 0,

curCat: {},

videoindex: 0,

videoH: 700,

maskStatus:'hide',

videoBtnStatus:'hide'

},

curColorType: '', //选择的颜色

curTypeCode: '', //选择的类型

page: 1, //第几页

pageSize: 20, //每页显示数量

openId: app.openId,

isEnd :false,

isAjax:false,

noDataTip:'暂无数据,切换一个标签吧',

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

wx.getSystemInfo({//适配

success: function (res) {

console.info("版本号", +res.SDKVersion.replace(/\./g, ""));

if (+res.SDKVersion.replace(/\./g, "")<=210){

wx.showToast({

title: '您当前微信版本太低,部分功能不支持,请升级到最新微信版本',

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();

//用户第一次显示操作提示

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);

}

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

this.btnshare();

return {

title: app.data.shareTitle,

path: app.data.sharePath,

}

},

videowait: function () {

wx.showLoading({

title: "拼命加载中...",

})

},

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: '授权失败',

icon: 'none',

duration: 2000

})

console.info("授权失败")

}

 

},

goCenter: function () {

if (!wx.canIUse('button.open-type.getUserInfo')) {

wx.showToast({

title: '请升级微信版本',

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', {});

 

},

/**

* 上面风格点击事件

*/

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

})

}

});

 

},

 

//触摸开始事件

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;

 

},

//触摸移动事件

touchmove: function (e) {

// console.log(e)

let touchendY = e.touches[0].clientY;

let touchstartY = this.data.touchstartY;

//向上滑动

if (touchendY - touchstartY <= -40) {

console.log("向上滑动");

up = true;

down = false;

}

//向下滑动

if (touchendY - touchstartY >= 40) {

console.log("向下滑动");

up = false;

down = true;

}

},

//触摸结束事件

touchend: function (e) {

var that = this;

var videoList = that.data.catList;

if (up === true) {

if (videopage >= videoList.length - 1) {

if(that.isEnd){ //如果已经结束了

if (videoList.length <= 0) {

wx.showToast({

title: that.noDataTip,

icon: 'none',

duration: 2000

});

return;

} else {

videopage = 0;

}

}else{ //如果还没有结束,加载下一个

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);

},

//关闭操作提示

closeMask:function(){

var that = this;

that.setData({

maskStatus:'hide'

})

},

//视频暂停与播放封装 status:1播放 2暂停

videoPlay: function (status) {

console.info(status);

var that = this;

var v = wx.createVideoContext("video0");

if (status == 1){//播放

v.play();

that.setData({

videoBtnStatus: 'hide'

})

} else if (status == 2){//暂停

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

})

}

 

});

 

本文地址:https://blog.csdn.net/u012011360/article/details/85990811

相关标签: 小程序