如何开发微信小程序_微信小程序仿抖音短视频切

发布时间:2021-01-05 13:23 作者:jianzhan

摘要: 手机微信微信小程序仿抖音短视频小视频转换实际效果的案例编码 本文关键详细介绍了手机微信微信小程序仿抖音短视频小视频转换实际效果,文中根据案例编码给大伙儿详细介绍

微信小程序仿抖音短视频切换效果的实例代码       这篇文章主要介绍了微信小程序仿抖音短视频切换效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的。

还是先看效果

体验路径

自定义组件系列》》仿抖音短视频切换

代码逻辑

直接调用自定义的swiper组件就好
调用代码
js

const videoList = []
Page({
 data: {
 videoList,
 activeId:2,
 isPlaying:true
 onLoad() {
 var that = this
 wx.getSystemInfo({
 success: function(res) {
 that.setData({
 systemInfo:res,
 menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
 console.log(res)
 this.setData({
 videoList: [{
 id: 1,
 title: "黄渤",
 desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
 url: "video-swiper/69410.mp4 sign=1f636557effa496e074332e3f4b9b8aa t="
 }, {
 id: 2,
 title: "莱万多夫斯基",
 desc: "莱万多夫斯基逆天五子登科",
 url: "video-swiper/74828.mp4 sign=185e46cba885c4303c7cf5f8658bea9b t="
 }, {
 id: 3,
 title: "驾考那些事",
 desc: "半坡起步是多难",
 url: "video-swiper/71309.mp4 sign=978660c42305ec67d4c3d603c2ae5a3d t="
 }, {
 id: 4,
 title: "小美女",
 desc: "蹦蹦跳跳",
 url: "video-swiper/88534.mp4 sign=43cf344eeeeea38d26ba51bb t="
 }, {
 id: 5,
 title: "黄渤",
 desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
 url: "video-swiper/69410.mp4 sign=1f636557effa496e074332e3f4b9b8aa t="
 }, {
 id: 6,
 title: "莱万多夫斯基",
 desc: "莱万多夫斯基逆天五子登科",
 url: "video-swiper/74828.mp4 sign=185e46cba885c4303c7cf5f8658bea9b t="
 }, {
 id: 7,
 title: "驾考那些事",
 desc: "半坡起步是多难",
 url: "video-swiper/71309.mp4 sign=978660c42305ec67d4c3d603c2ae5a3d t="
 }, {
 id: 8,
 title: "小美女",
 desc: "蹦蹦跳跳",
 url: "video-swiper/88534.mp4 sign=43cf344eeeeea38d26ba51bb t="
 }, {
 id: 9,
 title: "黄渤",
 desc: "中国女排发布会,黄渤与巩俐中国女排发布会,黄渤与巩俐",
 url: "video-swiper/69410.mp4 sign=1f636557effa496e074332e3f4b9b8aa t="
 }, {
 id: 10,
 title: "莱万多夫斯基",
 desc: "莱万多夫斯基逆天五子登科",
 url: "video-swiper/74828.mp4 sign=185e46cba885c4303c7cf5f8658bea9b t="
 }, {
 id: 11,
 title: "驾考那些事",
 desc: "半坡起步是多难",
 url: "video-swiper/71309.mp4 sign=978660c42305ec67d4c3d603c2ae5a3d t="
 }, {
 id: 12,
 title: "小美女",
 desc: "蹦蹦跳跳",
 url: "video-swiper/88534.mp4 sign=43cf344eeeeea38d26ba51bb t="
 onPlay(e) {
 // console.log("开始播放",e)
 onShowPause(e){
 this.setData({
 isPlaying: false
 onHidePause(e){
 this.setData({
 isPlaying: true
 onPause(e) {
 onEnded(e) {
 // console.log(e)
 onError(e) {
 onWaiting(e) {
 onTimeUpdate(e) {
 onProgress(e) {
 onChange(e) {
 console.log(e)
 console.log("id",e.detail.activeId)
 this.setData({
 activeId:e.detail.activeId
 onLoadedMetaData(e) {
 console.log('LoadedMetaData', e)
 go2Home() {
 wx.navigateBack({
 delta: 1,
})

wxml

 mp-video-swiper video-list="{{videoList}}" bindplay="onPlay" bindpause="onPause" bindtimeupdate="onTimeUpdate" bindended="onEnded" binderror="onError" bindwaiting="onWaiting" bindprogress="onProgress" bindloadedmetadata="onLoadedMetaData"
 bindchange="onChange" bindshowPause="onShowPause" bindhidePause="onHidePause" /mp-video-swiper 
 image wx:if="{{!isPlaying}}" src="./player.png" 
 /image 
 view 
 view {{videoList[activeId-1].title}} /view 
 view {{videoList[activeId-1].desc}} /view 
 /view 
 view 
 view 首页 /view 
 view 动态 /view 
 view 商品 /view 
 view 我的 /view 
 /view 

wxss

@import '../common.wxss';
page{
 background-color: black;
 height: 100%;
mp-video-swiper {
 width: 100%;
 height: 100%;
.imagePlayer{
 width: 40px;
 height: 40px;
 position: fixed;
 z-index: 1000;
 opacity: 0.6
.viewFloat{
 position: fixed;
 display: flex;
 z-index: 100;
 width: 500rpx;
 bottom: 60px;
 color: white;
 margin:20rpx; 
 flex-direction: column
.videoTitle{
 font-size: 18px;
 font-weight: 500;
.videoDes{
 font-size: 14px;
.viewTabContainer{
 position: fixed;
 display: flex;
 justify-content: space-around;
 align-items: center;
 flex-direction: row;
 width: 100%;
 height: 50px;
 border-top: 0.5px solid white;
 bottom: 0;
.viewTab{
 color: white;
}

总结

到此这篇关于微信小程序仿抖音短视频切换效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音短视频切换内容请搜索凡科以前的文章或继续浏览下面的

  • 基岩资产:5G身后的暗潮涌

    让全世界分裂,以往核弹能确保的,今天互连网通电信讯或许还可以确保。从信息内容內容的转换成、传输到接纳,大家便于降低全世界的总宽,变更信息内容內容的传输方式,不断依

  • 人气值虚胖,互连网服务

    “号主”早已去世,却没法在失窃号的状况下“证实清正”,让其亲朋好友“没法宁静”;“水军”“洗号”难题很多年来难解,管控无法控制;粉絲争斗“轮博”,只求偶像在排名榜

  • 手机微信微信小程序是用

    原题目:手机微信微信小程序是用哪种語言开发设计的呢 说到手机微信微信小程序将会大部分分仅仅一知半解,您是不是清晰微信小程序是用哪种来开发设计的?假如您不太清晰,那麼

  • 三只荷兰鼠宣布登录自主

    继来伊份(603777)以后,创立仅七年,有“零食界小米手机”之称的三只荷兰鼠宣布打开了其资产销售市场之途。 8月12日,三只荷兰鼠在去深交所自主创业板挂牌上市发售,个股编码

  • 剪发店应当怎样与手机微

    移动互联网网网的发展趋势发展趋势发展趋势,造成了许多高效率率的连接专用型专用工具。许多独立自主创业者头昏头晕眼花缭乱的同时,可能没有意识到,每一种新的专用型专用工