中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

MUI  Scroll插件的使用詳解

發布時間:2020-10-11 20:20:30 來源:腳本之家 閱讀:321 作者:貝爾塔貓 欄目:web開發

http://dev.dcloud.net.cn/mui/ui/#scroll

神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom對象,具體demo為:

https://www.jb51.net/article/111085.htm

神坑2:scrollTo每次移動的距離,是相對于當前打距離的移動的,而不是移動到絕對的距離。

scroll(區域滾動)

在App開發中,div區域滾動的需求是普遍存在的,但系統默認實現又有如下問題:

  • Android平臺4.0以下不支持div滾動
  • Android平臺4.0以上支持div滾動,但不顯示滾動條

彈出層的div滾動在iOS平臺存在事件透傳的問題

因此,mui額外提供了區域滾動組件,使用時需要遵循如下DOM結構

<div class="mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--這里放置真實顯示的DOM內容-->
  </div>
</div>

 然后使用一下js

mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 減速系數,系數越大,滾動速度越慢,滾動距離越小,默認值0.0006 
});

一些常用scroll功能代碼:

快速回滾到該區域頂部,代碼如下:

神坑2:scrollTo每次移動的距離,是相對于當前的距離來移動的,而不是移動到絕對的距離。

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滾動到頂

滾動到頂部的代碼比較容易實現,坐標值設為0、0即可;但滾動到底部,需要計算該區域的實際高度,因此mui封裝了scrollToBottom方法。

mui('.mui-scroll-wrapper').scroll().scrollToBottom(100);//100毫秒滾動到底部

 關于我快速滑動demo:

神坑2:scrollTo每次移動的距離,是相對于當前的距離來移動的,而不是移動到絕對的距離。

所以通常的做法是根據當前的位置 - 將要抵達的位置,求出距離然后再進行移動,如以下的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插件的使用詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

建瓯市| 沾化县| 桐乡市| 吉林省| 万载县| 信丰县| 乐陵市| 涞源县| 奈曼旗| 庆城县| 分宜县| 万荣县| 鲜城| 襄樊市| 玉田县| 绵竹市| 海门市| 文昌市| 杂多县| 克什克腾旗| 旌德县| 大渡口区| 琼中| 油尖旺区| 汉沽区| 营口市| 乌兰察布市| 邹平县| 普陀区| 通城县| 义马市| 怀远县| 凉城县| 乌苏市| 普格县| 萍乡市| 廊坊市| 津市市| 山阴县| 玛纳斯县| 兴山县|