爲什麼要研究一款上拉加載下拉刷新的插件呢，因爲最近新入職的新公司需要用，原來是用的mint-ui 的load-more ,存在兼容性問題，在瀏覽器模擬是完全沒有問題的，但是在使用手機測試時，頁面像被hidden 了一樣，感覺可能是代碼哪裏寫的有問題，百度了一下這個load-more確實也存在一些兼容問題， 不然也不能試了兩臺手機都不好使。因爲項目比較這幾，果斷放棄了loadmore 的使用，換用mescroll,看官方文檔的使用方法，真的是簡單清晰易操作！
官網：mescroll.js 官網 有很多種支持和案例
參考文檔就自己寫了一個demo mydemo
demo 是在vue項目中以組件的形式使用mescroll.js
1. 執行npm命令安裝mescroll : npm install --save mescroll.js
2.引入mescroll組件 : import MescrollVue from 'mescroll.js/mescroll.vue'
3、代碼實現
<template>
<div>
<header>
mescroll 測試
</header>
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
<!--內容...-->
<ul class="data-list">
<li class="data-li" v-for="(item, index) in dataList" :key="index" @click="myClick(index)">
<span>{{ item }}</span>
</li>
</ul>
</mescroll-vue>
</div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
import MescrollMixins from '@/assets/MescrollMixins.js'
export default {
data() {
return {
mescroll: null, // mescroll實例對象
mescrollDown: {}, // 下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則mescrollDown可不用寫了)
mescrollUp: {
callback: this.upCallback, // 上拉回調,此處簡寫; 相當於 callback: function(page, mescroll) { }
// 以下是一些常用的配置,當然不寫也可以的.
page: {
num: 0, // 當前頁 默認0,回調之前會加1; 即callback(page)會從1開始
size: 15 // 每頁數據條數,默認10
},
htmlNodata: '<p class="upwarp-nodata">沒有更多數據了</p>',
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: [] // 列表數據
}
},
components: {
MescrollVue // 註冊meScroll 組件
},
methods: {
// mescroll組件初始化的回調,可獲取到mescroll對象
mescrollInit(mescroll) {
this.mescroll = mescroll // 如果this.mescroll對象沒有使用到,則mescrollInit可以不用配置
},
upCallback(page, mescroll) {
// 去異步請求 獲取新一頁的數據
// 暫且用定時器模擬
this.getDataFromnet(
page.num,
page.size,
arr => {
// 如果頁面是第一頁 那麼 把datalist 置空
if (page.num === 1) this.dataList = []
// 將新請求的數據 添加到數據列表
this.dataList = this.dataList.concat(arr)
// 數據渲染成功後,隱藏下拉刷新的狀態
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
})
},
() => {
// 聯網異常,隱藏上拉和下拉的加載進度
mescroll.endErr()
}
)
},
// 模擬從網絡獲取數據
getDataFromnet(pageNum, pageSize, successCallback, errorCallback) {
setTimeout(() => {
const listData = []
if (pageNum < 6) {
for (let i = 0; i < pageSize; i++) {
listData.push('第' + pageNum + '頁 ：' + i)
}
}
// 回調
successCallback(listData)
}, 1000)
},
myClick(index) {
console.log(this.dataList[index] + ':' + index)
this.$router.push('/details')
}
}
}
</script>
<style lang="less" scoped>
header {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
background: green;
color: white;
}
.mescroll {
position: fixed;
top: 44px;
bottom: 0;
height: auto;
.data-list {
.data-li {
width: 100%;
height: 50px;
line-height: 50px;
padding-left: 10px;
&:nth-child(odd) {
background: pink;
}
&:nth-child(even) {
background: skyblue;
}
}
}
}
</style>
4、引入官方demo 中的 MescrollMixins.js文件
整體的實現比較簡單 官方文檔還有待研究研究。