mescroll 1.3.6 文檔 2018-09-10
GitHub
Star
關注 mescroll 更新動態 及時用上新版本新功能哦 ~
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪 <div> //這個div不能刪, 可以改成ul或者其他容器標簽. //內容... </div> </div>
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如設置bottom:50px,則需height:auto才能生效*/ }
var mescroll = new MeScroll("mescroll", { //第一個參數"mescroll"對應上面布局結構div的id (1.3.5版本支持傳入dom對象) //如果您的下拉刷新是重置列表數據,那么down完全可以不用配置,具體用法參考第一個基礎案例 //解析: down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback down: { callback: downCallback //下拉刷新的回調,別寫成downCallback(),多了括號就自動執行方法了 }, up: { callback: upCallback, //上拉加載的回調 //以下是一些常用的配置,當然不寫也可以的. page: { num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始 size: 10 //每頁數據條數,默認10 }, noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於5才顯示無更多數據; 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看 toTop: { //回到頂部按鈕 src: "../img/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖 offset: 1000 //列表滾動1000px才顯示回到頂部按鈕 }, empty: { //列表第一頁無任何數據時,顯示的空提示布局; 需配置warpId才顯示 warpId: "xxid", //父布局的id (1.3.5版本支持傳入dom元素) icon: "../img/mescroll-empty.png", //圖標,默認null,支持網絡圖 tip: "暫無相關數據~" //提示 }, lazyLoad: { use: true // 是否開啟懶加載,默認false attr: 'imgurl' // 標簽中網絡圖的屬性名 : <img imgurl='網絡圖 src='占位圖''/> } } });
//下拉刷新的回調 function downCallback() { $.ajax({ url: 'xxxxxx', success: function(data) { //聯網成功的回調,隱藏下拉刷新的狀態; mescroll.endSuccess(); //無參. 注意結束下拉刷新是無參的 //設置數據 //setXxxx(data);//自行實現 TODO }, error: function(data) { //聯網失敗的回調,隱藏下拉刷新的狀態 mescroll.endErr(); } }); } //上拉加載的回調 page = {num:1, size:10}; num:當前頁 默認從1開始, size:每頁數據條數,默認10 function upCallback(page) { $.ajax({ url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num從0開始 ? success: function(curPageData) { //聯網成功的回調,隱藏下拉刷新和上拉加載的狀態; //mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空,顯示empty配置的內容; //列表如果無下一頁數據,則提示無更多數據,(注意noMoreSize的配置) //方法一(推薦): 后台接口有返回列表的總頁數 totalPage //必傳參數(當前頁的數據個數, 總頁數) //mescroll.endByPage(curPageData.length, totalPage); //方法二(推薦): 后台接口有返回列表的總數據量 totalSize //必傳參數(當前頁的數據個數, 總數據量) //mescroll.endBySize(curPageData.length, totalSize); //方法三(推薦): 您有其他方式知道是否有下一頁 hasNext //必傳參數(當前頁的數據個數, 是否有下一頁true/false) //mescroll.endSuccess(curPageData.length, hasNext); //方法四 (不推薦),會存在一個小問題:比如列表共有20條數據,每頁加載10條,共2頁. //如果只根據當前頁的數據個數判斷,則需翻到第三頁才會知道無更多數據 //如果傳了hasNext,則翻到第二頁即可顯示無更多數據. //mescroll.endSuccess(curPageData.length); //結束下拉刷新的 mescroll.endSuccess()無參. //結束上拉加載 curPageData.length必傳的原因: 1.使配置的noMoreSize生效 2.判斷是否有下一頁的首要依據: 當傳的值小於page.size時,則一定會認為無更多數據. 比傳入的totalPage, totalSize, hasNext具有更高的判斷優先級 3.當傳的值等於page.size時,才會取totalPage, totalSize, hasNext判斷是否有下一頁 傳totalPage, totalSize, hasNext主要目的是避免方法四描述的小問題 //設置列表數據 //setListData(curPageData);//自行實現 TODO }, error: function(e) { //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態 mescroll.endErr(); } }); }
var mescroll = new MeScroll("mescroll", { up: { lazyLoad: { use: true, // 是否開啟懶加載,默認false attr: 'imgurl', // 網絡圖片地址的屬性名 (圖片加載成功會自動移除改屬性): <img imgurl='網絡圖 src='占位圖''/> showClass: 'mescroll-lazy-in', // 圖片加載成功的顯示動畫: 漸變顯示,參見mescroll.css delay: 500, // 列表滾動的過程中每500ms檢查一次圖片是否在可視區域,如果在可視區域則加載圖片 offset: 200 // 超出可視區域200px的圖片仍可觸發懶加載,目的是提前加載部分圖片 } } })
img標簽: <img imgurl="網絡圖" src="占位圖"/> // 占位圖直接在src設置; 圖片加載成功,就會替換src的占位圖 div或其他標簽: <div imgurl="網絡圖" style="background-image: url(占位圖)"><div> // 占位圖在css中設置; 圖片以背景圖的形式展示
npm install --save mescroll.js //不要使用cnpm安裝
<template>
<div>
<!--mescroll滾動區域的基本結構,為避免id重復導致的多次初始化,這里使用ref--> <div ref="mescroll" class="mescroll"> <div> <!--內容...--> </div> </div> </div> </template> <script> //引入mescroll.min.js和mescroll.min.css import MeScroll from 'mescroll.js' import 'mescroll.js/mescroll.min.css' export default { name: 'xxx', data() { return { mescroll: null, //mescroll實例對象 dataList:[] //列表數據 } }, mounted: function () { //創建MeScroll對象 this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,確保此處配置的ref有值 // down:{}, //下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則down可不用寫了) up: { callback: this.upCallback, // 以下是一些常用的配置,當然不寫也可以的. page: { num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始 size: 10, //每頁數據條數,默認10 }, noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於5才顯示無更多數據; 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看 toTop: { //回到頂部按鈕 src: "./static/mescroll/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖 offset: 1000, //列表滾動1000px才顯示回到頂部按鈕 }, empty: { //列表第一頁無任何數據時,顯示的空提示布局; 需配置warpId才顯示 warpId: "xxid", //父布局的id (1.3.5版本支持傳入dom元素) icon: "./static/mescroll/mescroll-empty.png", //圖標,默認null,支持網絡圖 tip: "暫無相關數據~", //提示 } } }); }, methods: { //上拉回調 page = {num:1, size:10}; num:當前頁 ,默認從1開始; size:每頁數據條數,默認10 upCallback(page) { //聯網請求 axios.get("xxxxxx", { params: { num: page.num, //頁碼 size: page.size //每頁長度 } }).then((response)=> { //請求的列表數據 let arr = response.data; //如果是第一頁需手動制空列表 if (page.num == 1) this.dataList = []; //把請求到的數據添加到列表 this.dataList = this.dataList.concat(arr); //數據渲染成功后,隱藏下拉刷新的狀態 this.$nextTick(() => { this.mescroll.endSuccess(arr.length); }) }).catch((e)=> { //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態; this.mescroll.endErr(); }) } }, // 進入路由時,恢復列表狀態 beforeRouteEnter (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteEnter不用寫 next(vm => { if (vm.mescroll) { // 恢復到之前設置的isBounce狀態 if (vm.mescroll.lastBounce != null) vm.mescroll.setBounce(vm.mescroll.lastBounce) // 滾動到之前列表的位置 (注意:路由使用keep-alive才生效) if (vm.mescroll.lastScrollTop) { vm.mescroll.setScrollTop(vm.mescroll.lastScrollTop) setTimeout(() => { // 需延時,因為setScrollTop內部會觸發onScroll,可能會漸顯回到頂部按鈕 vm.mescroll.setTopBtnFadeDuration(0)// 設置回到頂部按鈕顯示時無漸顯動畫 }, 16) } } }) }, // 離開路由時,記錄列表狀態 beforeRouteLeave (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteLeave不用寫 if (this.mescroll) { this.mescroll.lastBounce = this.mescroll.optUp.isBounce// 記錄當前是否禁止ios回彈 this.mescroll.setBounce(true) // 允許bounce this.mescroll.lastScrollTop = this.mescroll.getScrollTop()// 記錄當前滾動條的位置 this.mescroll.hideTopBtn(0)// 隱藏回到頂部按鈕,無漸隱動畫 } next() } } </script> <style scope> /*通過fixed固定mescroll的高度*/ .mescroll { position: fixed; top: 44px; bottom: 0; height: auto; } </style>
<template>
<div>
<!--mescroll滾動區域的基本結構--> <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit"> <!--內容...--> </mescroll-vue> </div> </template> <script> // 引入mescroll的vue組件 import MescrollVue from 'mescroll.js/mescroll.vue' export default { name: 'xxx', components: { MescrollVue // 注冊mescroll組件 }, data () { return { mescroll: null, // mescroll實例對象 mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則mescrollDown可不用寫了) mescrollUp: { // 上拉加載的配置. callback: this.upCallback, // 上拉回調,此處簡寫; 相當於 callback: function(page, mescroll) { } //以下是一些常用的配置,當然不寫也可以的. page: { num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始 size: 10 //每頁數據條數,默認10 }, noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於5才顯示無更多數據; 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看 toTop: { //回到頂部按鈕 src: "./static/mescroll/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖 offset: 1000 //列表滾動1000px才顯示回到頂部按鈕 }, empty: { //列表第一頁無任何數據時,顯示的空提示布局; 需配置warpId才顯示 warpId: "xxid", //父布局的id (1.3.5版本支持傳入dom元素) icon: "./static/mescroll/mescroll-empty.png", //圖標,默認null,支持網絡圖 tip: "暫無相關數據~" //提示 } }, dataList: [] // 列表數據 } }, beforeRouteEnter (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteEnter不用寫 next(vm => { vm.$refs.mescroll.beforeRouteEnter() // 進入路由時,滾動到原來的列表位置,恢復回到頂部按鈕和isBounce的配置 }) }, beforeRouteLeave (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteLeave不用寫 this.$refs.mescroll.beforeRouteLeave() // 退出路由時,記錄列表滾動的位置,隱藏回到頂部按鈕和isBounce的配置 next() }, methods: { // mescroll組件初始化的回調,可獲取到mescroll對象 mescrollInit (mescroll) { this.mescroll = mescroll }, // 上拉回調 page = {num:1, size:10}; num:當前頁 ,默認從1開始; size:每頁數據條數,默認10 upCallback (page, mescroll) { // 聯網請求 axios.get('xxxxxx', { params: { num: page.num, // 頁碼 size: page.size // 每頁長度 } }).then((response) => { // 請求的列表數據 let arr = response.data // 如果是第一頁需手動制空列表 if (page.num === 1) this.dataList = [] // 把請求到的數據添加到列表 this.dataList = this.dataList.concat(arr) // 數據渲染成功后,隱藏下拉刷新的狀態 this.$nextTick(() => { mescroll.endSuccess(arr.length) }) }).catch((e) => { // 聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態; mescroll.endErr() }) } } } </script> <style scope> /*通過fixed固定mescroll的高度*/ .mescroll { position: fixed; top: 44px; bottom: 0; height: auto; } </style> | var mescroll = new MeScroll ( id或dom對象 , { down : { 下拉刷新的配置參數 } , up : { 上拉加載的配置參數 } } ) ; | ||
| down 下拉刷新的配置參數 | ||
| 參數名 | 默認值 | 說明 |
| use | true | 是否啟用下拉刷新 如果配置false,則不會初始化下拉刷新的布局 |
| auto | true | 是否在初始化完畢之后自動執行一次下拉刷新的回調 callback |
| autoShowLoading | false | 如果設置auto=true ( 在初始化完畢之后自動執行下拉刷新的回調 ) , 那么是否顯示下拉刷新的進度 |
| isLock | false | 是否鎖定下拉刷新 如果配置true,則會鎖定不可下拉,可通過調用mescroll.lockDownScroll(false)解鎖 |
| isBoth | false | 下拉刷新時,如果滑動到列表底部是否可以同時觸發上拉加載 |
| offset | 80 | 在列表頂部,下拉大於80px,松手即可觸發下拉刷新的回調 |
| outOffsetRate | 0.2 | 在列表頂部,下拉的距離大於offset時,改變下拉區域高度比例; 值越接近0,高度變化越小,表現為越往下越難拉 |
| bottomOffset | 20 | 當手指touchmove位置在距離body底部20px范圍內的時候結束上拉刷新,避免Webview嵌套導致touchend事件不執行 這是1.2.1版本新增的配置,請檢查最新版~ |
| minAngle | 45 | 觸發下拉最少要偏移的角度(滑動的軌跡與水平線的銳角值),取值區間 [0,90];默認45度,即向下滑動的角度大於45度(方位角為45°~145°及225°~315°)則觸發下拉;而小於45度,將不觸發下拉,避免與左右滑動的輪播等組件沖突; 注意:沒有必要配置超出[0,90]區間的值,否則角度限制無效; 因為假設配置60, 生效的方位角就已經是60°到120° 和 240°到300°的范圍了; 這是1.1.6版本新增的配置,請檢查更新最新版~ |
| hardwareClass | "mescroll-hardware" | 硬件加速樣式,解決iOS下拉因隱藏進度條而閃屏的問題 |
| warpClass | "mescroll-downwarp" | 下拉刷新的布局容器樣式 |
| resetClass | "mescroll-downwarp-reset" | 下拉刷新高度重置的動畫 |
| htmlContent | '<p class="downwarp-progress"></p> <p class="downwarp-tip">下拉刷新</p>' |
下拉刷新的布局內容 "downwarp-progress"和"downwarp-tip"的class不要隨意刪掉 必須和inited的配置對應 請參考 mescroll所有配置項 的代碼去配置 |
| inited | function ( mescroll, downwarp ) { ... } | 下拉刷新初始化完畢的回調 (mescroll實例對象,下拉刷新容器dom對象) |
| inOffset | function ( mescroll ) { ... } | 下拉的距離進入offset范圍內那一刻的回調 (mescroll實例對象) |
| outOffset | function ( mescroll ) { ... } | 下拉的距離大於offset那一刻的回調 (mescroll實例對象) |
| onMoving | function ( mescroll, rate, downHight ) { ... } | 下拉過程中的回調,滑動過程一直在執行; rate : 拉區域當前高度與指定距離的比值 ( inOffset: rate<1; outOffset: rate>=1 ) downHight : 當前下拉區域的高度 |
| beforeLoading | function ( mescroll , downwarp ) { return false; } |
准備觸發下拉刷新的回調; 如果return true,將不觸發showLoading和callback 常用來完全自定義下拉刷新, 具體用法參考【淘寶 v6.8.0】 |
| showLoading | function ( mescroll ) { ... } | 顯示下拉刷新進度的回調 |
| callback | function ( mescroll ) { mescroll.resetUpScroll(); } |
下拉刷新的回調; 默認重置上拉加載列表為第一頁 |
| up 上拉加載的配置參數 | ||
| 參數名 | 默認值 | 說明 |
| use | true | 是否啟用上拉加載 如果配置false,則不會初始化上拉加載的布局 |
| auto | 1.3.1以前版本默認false 1.3.1版本默認true |
是否在初始化完畢之后自動執行一次上拉加載的回調 |
| isLock | false | 是否鎖定上拉加載 如果配置true,則會鎖定不可上拉,可通過調用mescroll.lockUpScroll(false)解鎖 |
| isBoth | false | 上拉加載時,如果滑動到列表頂部是否可以同時觸發下拉刷新 |
| isBounce | true | 是否允許ios的bounce回彈;默認true,允許回彈 (v 1.3.0新增) |
| offset | 100 | 列表滾動到距離底部小於100px,即可觸發上拉加載的回調 |
| noMoreSize | 5 | 如果列表已無數據,可設置列表的總數量要大於5條才顯示無更多數據; 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看 |
| toTop | { warpId : null , src : null , html: null , offset : 1000 , warpClass : "mescroll-totop" , showClass : "mescroll-fade-in" , hideClass : "mescroll-fade-out" , duration : 300 , supportTap : false } |
回到頂部按鈕的配置: warpId: 父布局的id; 默認添加在body中 (1.3.5版本支持傳入dom元素) src : 圖片路徑,必須配置src才會顯示回到頂部按鈕,不配置不顯示 html: 標簽內容,默認null; 如果同時設置了src,則優先取src (2017/12/10新增) offset : 列表滾動1000px顯示回到頂部按鈕 warpClass : 按鈕樣式 showClass : 顯示樣式 hideClass : 隱藏樣式 duration : 回到頂部的動畫時長, 默認300ms supportTap: 如果您的運行環境支持tap,則可配置true,可減少點擊延時,快速響應事件;默認false,通過onclick添加點擊事件; (v 1.3.0 新增) (注:微信和PC無法響應tap事件) |
| loadFull | { use : false , delay : 500 } |
use : 列表數據過少,不足以滑動觸發上拉加載,是否自動加載下一頁,直到滿屏或無數據; 默認false,因為可調大page.size使數據滿屏. delay : 延時執行的毫秒數; 延時是為了保證列表數據或占位的圖片都已初始化完成,且下拉刷新上拉加載中區域動畫已執行完畢; |
| empty | { warpId : null , icon : null , tip : "暫無相關數據~" , btntext : "" , btnClick : null supportTap : false } |
列表第一頁無任何數據時,顯示的空布局 需配置warpId或clearEmptyId才生效 warpId : 父布局的id; 如果此項有值,將不使用clearEmptyId的值; (1.3.5版本支持傳入dom元素) icon : 空布局的圖標路徑 tip : 提示文本 btntext : 按鈕文本 btnClick : 點擊按鈕的回調 supportTap: 如果您的運行環境支持tap,則可配置true,可減少點擊延時,快速響應事件;默認false,通過onclick添加點擊事件; (v 1.3.0 新增) (注:微信和PC無法響應tap事件) |
| clearId | null | 加載第一頁時需清空數據的列表id 如果此項有值,將不使用clearEmptyId的值 在vue中使用,不能配置此項 |
| clearEmptyId | null | 相當於同時設置了clearId和empty.warpId 簡化寫法; 在vue中使用,不能配置此項 |
| hardwareClass | "mescroll-hardware" | 硬件加速樣式,使動畫更流暢 |
| warpClass | "mescroll-upwarp" | 上拉加載的布局容器樣式 |
| htmlLoading | '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加載中..</p>' | 上拉加載中的布局 |
| htmlNodata | '<p class="upwarp-nodata"> -- END -- </p>' |
無數據的布局 |
| inited | function ( mescroll , upwarp ) { } | 初始化完畢的回調 回調(mescroll實例, upwarp上拉加載的布局Dom對象) |
| showLoading | function ( mescroll , upwarp ) { ... } | 顯示上拉加載中的回調 回調(mescroll實例, upwarp上拉加載的布局Dom對象) |
| showNoMore | function ( mescroll , upwarp ) { ... } | 顯示無更多數據的回調 回調(mescroll實例, upwarp上拉加載的布局Dom對象) |
| onScroll | null | 列表滑動監聽, 默認null 例 onScroll : function(mescroll, y, isUp){ ... }; y為列表當前滾動條的位置; isUp=true向上滑,isUp=false向下滑) isUp是1.2.1版本新增的配置,請檢查最新版~ |
| callback | function ( page, mescroll ) { } | 上拉加載的回調; 回調 ( page對象, mescroll實例 ) |
| page | { num : 0 , size : 10 , time : null } |
num : 當前頁碼,默認0,回調之前加1,即callback(page)從1開始; 如何修改從0開始 ? size : 每頁數據的數量; time : 加載第一頁數據服務器返回的時間 (可空); 防止用戶翻頁時,后台新增了數據從而導致下一頁數據重復; |
| scrollbar | { use : ... , barClass : "mescroll-bar" } |
use : 是否開啟自定義滾動條; PC端默認true開啟自定義滾動條; 移動端默認false不使用 barClass : 自定義滾動條的樣式; |
| lazyLoad | { use: false, attr: 'imgurl', showClass: 'mescroll-lazy-in', delay: 500, offset: 200 } |
use: 是否開啟懶加載,默認false attr: 標簽中網絡圖片地址的屬性名,默認"imgurl" showClass: 顯示樣式:漸變顯示,參見mescroll.css delay: 列表滾動的過程中檢查一次圖片是否在可視區域的時間間隔,默認500 (單位ms) offset: 超出可視區域多少px的圖片仍可觸發懶加載 默認200 |
| 方法名 | 說明 |
| mescroll.endByPage(dataSize, totalPage, systime); (v 1.2.1 新增) |
隱藏下拉刷新和上拉加載的狀態, 在聯網獲取數據成功后調用 dataSize : 當前頁獲取的數據總數(注意是當前頁) totalPage : 列表的總頁數 systime : 加載第一頁數據的服務器時間 (可空); |
| mescroll.endBySize(dataSize, totalSize, systime); (v 1.2.1 新增) |
隱藏下拉刷新和上拉加載的狀態, 在聯網獲取數據成功后調用 dataSize : 當前頁獲取的數據總數(注意是當前頁) totalSize : 列表的總數據量 systime : 加載第一頁數據的服務器時間 (可空); |
| mescroll.endSuccess(dataSize, hasNext, systime); (v 1.2.1 調整) |
隱藏下拉刷新和上拉加載的狀態, 在聯網獲取數據成功后調用 dataSize : 當前頁獲取的數據量(注意是當前頁) hasNext : 是否有下一頁數據true/false systime : 加載第一頁數據的服務器時間 (可空); |
| mescroll.endErr(); | 隱藏下拉刷新和上拉加載的狀態, 在聯網獲取數據失敗后調用; mescroll內部會自動恢復原來的頁碼,時間等變量; |
| mescroll.resetUpScroll( isShowLoading ); | 重置列表為第一頁 (常用於列表篩選條件變化或切換菜單時重新刷新列表數據) 內部實現: 把page.num=1,再主動觸發up.callback isShowLoading 是否顯示進度布局; 1.默認null,不傳參,則顯示上拉加載的進度布局 2.傳參true, 則顯示下拉刷新的進度布局 3.傳參false,則不顯示上拉和下拉的進度 (常用於靜默更新列表數據) |
| mescroll.triggerDownScroll(); | 主動觸發下拉刷新 |
| mescroll.triggerUpScroll(); | 主動觸發上拉加載 |
| mescroll.setPageNum(num); (v 1.2.5 新增) |
設置當前page.num的值 |
| mescroll.setPageSize(size); (v 1.2.5 新增) |
設置當前page.size的值 |
| mescroll.scrollTo( y, t ); | 滾動列表到指定位置 y=0,則回到列表頂部; 如需滾動到列表底部,可設置y很大的值,比如y=99999 t時長,單位ms,默認300; 如果不需要動畫緩沖效果,則傳0 (需更新至1.2.3版本) |
| mescroll.optDown; | 獲取下拉刷新的配置 |
| mescroll.optUp; | 獲取上拉加載的配置 |
| mescroll.lockDownScroll( isLock ); | 鎖定下拉刷新 ( isLock=ture,null 鎖定 ; isLock=false 解鎖 ) |
| mescroll.lockUpScroll( isLock ); | 鎖定上拉加載 ( isLock=ture,null 鎖定 ; isLock=false 解鎖 ) |
| mescroll.os (v 1.2.5 新增) |
mescroll.os.ios 為true, 則是ios設備; mescroll.os.android 為true, 則是android設備; mescroll.os.pc 為true, 則是PC端; |
| mescroll.setBounce(boolean) (v 1.3.0 新增) |
mescroll.setBounce(true) 允許bounce; mescroll.setBounce(false) 禁止bounce |
| mescroll.lazyLoad(delay) (v 1.3.6 新增) |
主動觸發懶加載: 自動加載可視區域的圖片. delay:延時加載圖片的時間,默認500ms.目的是確保dom元素已渲染完成. |
| 以下方法不常用,您可靈活運用於更復雜的場景 | |
| 方法名 | 說明 |
| mescroll.showDownScroll(); | 顯示下拉刷新的進度布局 mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 內部有調用 |
| mescroll.endDownScroll(); | 隱藏下拉刷新的進度布局 mescroll.endSuccess() 和 mescroll.endErr() 內部有調用 |
| mescroll.endUpScroll(isShowNoMore) | 結束上拉加載的狀態 isShowNoMore=true, 顯示無更多數據; isShowNoMore=false, 隱藏上拉加載; isShowNoMore=null, 保持當前狀態 |
| mescroll.showUpScroll(); | 顯示上拉加載的進度布局 mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 內部有調用 |
| mescroll.showNoMore(); | 顯示上拉無更多數據的布局 mescroll.endUpScroll() 內部有調用 |
| mescroll.hideUpScroll(displayAble); | 隱藏上拉加載的布局 mescroll.endUpScroll() 內部有調用 1.3.5新增參數 displayAble: 是否通過display:none隱藏 默認false通過visibility:hidden的方式隱藏 |
| mescroll.clearDataList(); | 清空上拉加載的數據列表 mescroll.resetUpScroll() 和 mescroll.endSuccess() 內部有調用 |
| mescroll.showEmpty(); | 顯示無任何數據的空布局 mescroll.endSuccess() 內部有調用 |
| mescroll.removeEmpty(); | 移除無任何數據的空布局 mescroll.endSuccess() 內部有調用 |
| mescroll.showTopBtn(time); | 顯示回到頂部的按鈕 time: 顯示的動畫時長,默認0.5秒 (1.3.5版本新增參數) |
| mescroll.hideTopBtn(time); | 隱藏回到頂部的按鈕 time: 隱藏的動畫時長,默認0.5秒 (1.3.5版本新增參數) |
| mescroll.setTopBtnFadeDuration(time); (1.3.5版本新增) |
設置回到頂部按鈕的顯示和隱藏的動畫時長 time: 顯示隱藏動畫時長,默認0.5秒 |
| mescroll.getScrollTop(); | 獲取滾動條的位置y; 也可以在up配置onScroll監聽滾動條的位置 |
| mescroll.getBodyHeight(); | 獲取body的高度 |
| mescroll.getClientHeight(); | 獲取滾動容器的高度 |
| mescroll.getScrollHeight(); | 獲取滾動內容的高度 |
| mescroll.getToBottom(); (v 1.3.0新增) |
獲取當前滾動條到底部的距離 |
| mescroll.getStep(star, end, callback, t, rate); (v 1.2.8 新增) |
star : 開始值; end : 結束值; callback(step,timer) : 回調 function(step,timer), t : 計步時長; 傳0則直接回調end值; 不傳則默認300ms ; rate : 周期; 不傳則默認30ms計步一次 ; 此方法相當於默認在300ms內,每30ms返回star到end之間的階梯值step; 可用於模擬幀動畫 比如mescroll的回到頂部緩沖動畫,輪播導航案例的頂部菜單滾動都是通過getStep實現 (注: 您可根據實際情況在 callback 通過 window.clearInterval(timer) 提前結束計步器) |
| mescroll.version; (v 1.3.0新增) |
mescroll的版本號 |
| mescroll.destroy(); | 銷毀mescroll |
