微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼
效果演示:
WXML:
<view class="video_box"> <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video_list" wx:for="{{video_list}}" data-index="{{index}}" wx:key="index" > <text style="color:red;font-size:30px;display:block;">{{index}}</text> <video custom-cache="{{false}}" src="{{item.video_src}}" vslide-gesture-in-fullscreen="{{false}}" direction = '{{0}}' enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}" object-fit="cover"></video> </view> </view>
WXSS:
.video_box{width: 100%;height: auto;position: fixed;top:0;bottom: 0;background-color: #000;} .video_list{width: 100%;height: 100vh;position: relative;} .video_list video{position: absolute;top:50%;margin-top:-30vw; width: 100%;height:56vw;padding: 0;}
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { video_list:[ {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'}, {video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'}, {video_src:'https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'}, {video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'}, {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'}, ], pageY:'', // 觸摸起始高度坐標(biāo) animation:'', // 視頻劃動(dòng)動(dòng)畫 up_stroke:false,// ture:上劃;false:下劃 difference:'', // 拖動(dòng)的距離 windowHeight:'',// 屏幕高度 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { // 賦值:屏幕高度、 this.setData({ windowHeight:wx.getSystemInfoSync().windowHeight }) }, // 劃動(dòng)起始坐標(biāo)方法 touchStart(e){ // 開始坐標(biāo) this.setData({ pageY:e.touches[0].pageY, }) }, // 劃動(dòng)過程坐標(biāo)方法 touchMove(e){ let n = e.currentTarget.dataset.index; // 觸摸的第幾個(gè)序號(hào) let difference = e.touches[0].pageY - this.data.pageY; // 移動(dòng)后和起始值的差值 if(this.is_continue(n,difference)){ // 判斷是否到底 return; } // 劃動(dòng)動(dòng)畫 ------------------------------------- var animation = wx.createAnimation({ // 移動(dòng)動(dòng)效 duration: 0, }); animation.top(difference - (n*this.data.windowHeight)).step() this.setData({ animation: animation.export(), // 動(dòng)畫 up_stroke:difference > 0 ? false : true, // 是否上劃, difference:difference, // 拖動(dòng)的距離 }) }, // 劃動(dòng)結(jié)束坐標(biāo)方法 touchEnd(e){ let n = e.currentTarget.dataset.index; let difference = this.data.difference; // 拖動(dòng)的距離 if(this.is_continue(n,difference)){ return; } const windowHeight = this.data.windowHeight; // 屏幕高度 let that = this; // 根據(jù)id獲取點(diǎn)擊元素距頂部高度 var query = wx.createSelectorQuery(); let id = '#' + e.currentTarget.id; query.select(id).boundingClientRect(function (rect) { // 獲取高度 if(Math.abs(difference) <= windowHeight /7){ // 小于1/7回原位置 --------------------------- var animation = wx.createAnimation({ // 移動(dòng)動(dòng)效 duration: 100, }); animation.top(-(n * windowHeight)).step() that.setData({ animation: animation.export(), up_stroke:false, // 重置劃動(dòng)狀態(tài) difference:0, // 重置劃動(dòng)距離 }) }else{ // 大于1/4,移至拖動(dòng)的下一個(gè)視頻 -------------------------------- var animation = wx.createAnimation({ // 移動(dòng)動(dòng)效 duration: 200, }); that.data.up_stroke ? n++ : n--; // 上劃:n+1 下劃:n-1 animation.top(-(n * windowHeight)).step() that.setData({ animation: animation.export(), up_stroke:false, // 重置劃動(dòng)狀態(tài) difference:0, // 重置劃動(dòng)距離 }) } }).exec(); }, // 判斷是否到底 is_continue(n,difference){ if(difference < 0){ // 上劃 if(n == this.data.video_list.length - 1){ // 最后一個(gè)視頻,提示到底 if(difference < -20){ wx.showToast({ title: '已經(jīng)到底了~~', icon:'none', duration:1000 }) } return true; } }else{ if(n == 0){ if(difference > 20){ wx.showToast({ title: '上面沒有了~~', icon:'none', duration:1000 }) } return true; } } }, })
總結(jié)
到此這篇關(guān)于微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)微信小程序抖音視頻整屏切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題
這篇文章主要介紹了 Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題,需要的朋友可以參考下2017-02-02原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
本文主要介紹了使用原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換的功能,雖然jQuery有很多類似的插件,單jQuery庫著實(shí)有點(diǎn)龐大,這種小功能還是直接用javascript來做就好了。2015-01-01js實(shí)現(xiàn)文章文字大小字號(hào)功能完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)文章文字大小字號(hào)功能的實(shí)現(xiàn)方法,可根據(jù)用戶習(xí)慣調(diào)整顯示文字的大小.詳細(xì)講述了實(shí)現(xiàn)這一功能的完整步驟.是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11JavaScript toUpperCase()方法使用詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript toUpperCase()方法的使用技巧,感興趣的小伙伴們可以參考一下2016-08-08js實(shí)現(xiàn)彈窗插件功能實(shí)例代碼分享
這篇文章主要介紹了2013-12-12javascript搜索框效果實(shí)現(xiàn)方法
這篇文章主要介紹了javascript搜索框效果實(shí)現(xiàn)方法,可實(shí)現(xiàn)顯示默認(rèn)提示文字的搜索框效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05JS中video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖效果
html中的<video>標(biāo)簽可以用來播放常見的音視頻格式,支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等,當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān),這篇文章主要介紹了video標(biāo)簽自動(dòng)播放音視頻并繪制波形圖,需要的朋友可以參考下2023-09-09