微信小程序仿抖音短視頻切換效果的實(shí)例代碼
一直以為抖音短視頻切換假如用小程序做的話應(yīng)該是比較簡(jiǎn)單的,直接用swiper實(shí)現(xiàn)就好,但在實(shí)際寫的過程中才發(fā)現(xiàn)沒那么簡(jiǎn)單,要控制的邏輯還是挺多的。
還是先看效果
體驗(yàn)路徑
自定義組件系列》》仿抖音短視頻切換
代碼邏輯
直接調(diào)用自定義的swiper組件就好
調(diào)用代碼
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: "中國女排發(fā)布會(huì),黃渤與鞏俐中國女排發(fā)布會(huì),黃渤與鞏俐", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461" }, { id: 2, title: "萊萬多夫斯基", desc: "萊萬多夫斯基逆天五子登科", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482" }, { id: 3, title: "駕考那些事", desc: "半坡起步是多難", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496" }, { id: 4, title: "小美女", desc: "蹦蹦跳跳", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514" }, { id: 5, title: "黃渤", desc: "中國女排發(fā)布會(huì),黃渤與鞏俐中國女排發(fā)布會(huì),黃渤與鞏俐", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461" }, { id: 6, title: "萊萬多夫斯基", desc: "萊萬多夫斯基逆天五子登科", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482" }, { id: 7, title: "駕考那些事", desc: "半坡起步是多難", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496" }, { id: 8, title: "小美女", desc: "蹦蹦跳跳", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514" }, { id: 9, title: "黃渤", desc: "中國女排發(fā)布會(huì),黃渤與鞏俐中國女排發(fā)布會(huì),黃渤與鞏俐", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461" }, { id: 10, title: "萊萬多夫斯基", desc: "萊萬多夫斯基逆天五子登科", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482" }, { id: 11, title: "駕考那些事", desc: "半坡起步是多難", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496" }, { id: 12, title: "小美女", desc: "蹦蹦跳跳", url: "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514" }] }) }, 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 class="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}}" class="imagePlayer" style="left:{{systemInfo.screenWidth/2-40/2}}px;top:{{systemInfo.screenHeight/2-40/2}}px" src="./player.png"> </image> <view class="viewFloat"> <view class="videoTitle">{{videoList[activeId-1].title}}</view> <view class="videoDes">{{videoList[activeId-1].desc}}</view> </view> <view class="viewTabContainer"> <view class="viewTab">首頁</view> <view class="viewTab">動(dòng)態(tài)</view> <view class="viewTab">商品</view> <view class="viewTab">我的</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; }
總結(jié)
到此這篇關(guān)于微信小程序仿抖音短視頻切換效果的實(shí)例代碼的文章就介紹到這了,更多相關(guān)微信小程序抖音短視頻切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript面向?qū)ο蟀b類Class封裝類庫剖析
一個(gè)從來沒有接觸過javascript的技術(shù)人員,幾小時(shí)內(nèi)就可以寫出一個(gè)簡(jiǎn)單有用的程序代碼;想寫出高性能的代碼,同樣需要具備一個(gè)高級(jí)程序員的基本素養(yǎng),javascript也是如此2013-01-01Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05js操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox
下面小編就為大家?guī)硪黄猨s操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼
最近在項(xiàng)目中經(jīng)常遇到使用富文本框的情況,下面這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼
這篇文章主要介紹了js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼,利用鼠標(biāo)事件及頁面元素動(dòng)態(tài)操作實(shí)現(xiàn)頁面背景顏色的改變功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08