MUI Scroll外掛程式的使用詳解

2022-10-06 21:36:16 字數 1216 閱讀 5683

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

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

scroll(區域滾動)

在app開發中,div區域pkhsyz滾動的需求是普遍存在的,但系統預設實現又有如下www.cppcns.com問題:

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

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

然後使用一下js

mui('.mui-scroll-wrapper').scroll();

一些常用scroll功能**:

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

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

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

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

m程式設計客棧ui('.mui-scroll-www.cppcns.comwrapper').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外掛程式的使用詳解

本文位址:

vue better scroll外掛程式使用詳解

什麼是 better scroll better scroll 是乙個移動端滾動的解決方案,它是基於 iscroll 的重寫,它和 i 的主要區別在 這裡 better scroll 也很強大,不僅可以做普通的滾動列表,還可以做輪播圖 picker 等等。在需要的檔案中新增 import bscor...

Web Uploader檔案上傳外掛程式使用詳解

webuploader檔案上傳元件在現代的瀏覽器裡面能充分發揮html5的優勢,同時又不摒棄主流ie瀏覽器,沿用原來的flash執行時,相容ie6 ios 6 android 4 兩套執行時,同樣的呼叫方式,可供使用者任意選用。採用大檔案分片併發上傳,極大的提高了檔案上傳效率。一 功能介紹 分片 併...

Spring MVC JsonView使用詳解

spring 提供了對jackson 非常好的支援,可以檢視此spring jackson demo 來掌握。這裡著重說一下 jsonview的用法 jsonview可以過濾序列化物件的字段屬性,可以使你有選擇的序列化物件。下面看乙個例子 首先我們定義乙個view類,裡面包含我們對 要序列化的字段 ...