http://dev.dcloud.net.cn/mui/ui/#scroll
神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom對(duì)象,具體demo為:
http://m.survivalescaperooms.com/kaifa/javascript/241093.html
神坑2:scrollTo每次移動(dòng)的距離,是相對(duì)于當(dāng)前打距離的移動(dòng)的,而不是移動(dòng)到絕對(duì)的距離。
scroll(區(qū)域滾動(dòng))
在App開發(fā)中,div區(qū)域滾動(dòng)的需求是普遍存在的,但系統(tǒng)默認(rèn)實(shí)現(xiàn)又有如下問題:
彈出層的div滾動(dòng)在iOS平臺(tái)存在事件透傳的問題
因此,mui額外提供了區(qū)域滾動(dòng)組件,使用時(shí)需要遵循如下DOM結(jié)構(gòu)
<div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--這里放置真實(shí)顯示的DOM內(nèi)容--> </div></div>
然后使用一下js
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 減速系數(shù),系數(shù)越大,滾動(dòng)速度越慢,滾動(dòng)距離越小,默認(rèn)值0.0006 });一些常用scroll功能代碼:
快速回滾到該區(qū)域頂部,代碼如下:
神坑2:scrollTo每次移動(dòng)的距離,是相對(duì)于當(dāng)前的距離來移動(dòng)的,而不是移動(dòng)到絕對(duì)的距離。
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滾動(dòng)到頂滾動(dòng)到頂部的代碼比較容易實(shí)現(xiàn),坐標(biāo)值設(shè)為0、0即可;但滾動(dòng)到底部,需要計(jì)算該區(qū)域的實(shí)際高度,因此mui封裝了scrollToBottom方法。
mui('.mui-scroll-wrapper').scroll().scrollToBottom(100);//100毫秒滾動(dòng)到底部關(guān)于我快速滑動(dòng)demo:
神坑2:scrollTo每次移動(dòng)的距離,是相對(duì)于當(dāng)前的距離來移動(dòng)的,而不是移動(dòng)到絕對(duì)的距離。
所以通常的做法是根據(jù)當(dāng)前的位置 - 將要抵達(dá)的位置,求出距離然后再進(jìn)行移動(dòng),如以下的demo:
let index = $(e.event.target).index(); let id = $(e.event.target).attr("href"); let top = $(id).offset().top - 200; let current_top = mui('#segmentedControlContents .mui-scroll-wrapper').scroll().y; top = current_top - top; mui('#segmentedControlContents .mui-scroll-wrapper').scroll().scrollTo(0,top,300);以上所述是小編給大家介紹的MUI Scroll插件的使用詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答