VScrollFull 介紹
-
這個組件是什么？
是為了方便的使用下拉刷新，上拉加載而去封裝的一個依賴於 mescroll.js 的 vue 組件（未發布，文末代碼~） -
封裝這個組件使用了什么？
mescroll.js
vue.js -
封裝這個組件的理由？
沒有找到滿意的 vue 下拉刷新組件，正在使用的上拉加載的組件使用也不夠優雅，然后找到了 mescroll.js(可以去其官網案例一睹為快) 並簡單封裝了下使其能在 vue 項目中更方便的使用
效果演示 在線體驗
下拉刷新+上拉加載
下拉刷新布局需要注意的是，若第一屏沒有現實組件，則無法觸發下拉刷新，滑動到滾動位置需要設置 position:fixed，急需要吸頂效果時才能使用下拉，好像沒啥毛病~~~
上拉加載/滾動加載
項目中使用 組件所在倉庫地址
- 安裝 mescroll.js :
npm install --save mescroll.js - 將下面代碼拷貝到項目/參考下面代碼封裝自己的滾動組件
- 在頁面中引入並使用
組件封裝代碼
<template>
<div :id="refName" class="mescroll" :ref="refName">
<div :class="emptyCls" v-show="showEmptySlot">
<slot name="empty"></slot>
</div>
<div>
<slot></slot>
</div>
</div>
</template>
<script>
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
props: {
pageSize: {
type: Number,
default: 10
}
},
data() {
return {
showEmptySlot: false,
refName: 'mescroll_' + Date.now(),
instance: null
}
},
computed: {
emptyCls() {
return this.refName + '_empty'
}
},
mounted() {
this.$nextTick(this.$_init())
},
methods: {
$_init() {
this.showEmptySlot = false
if (this.instance) this.instance.destroy()
this.instance = new MeScroll(this.refName, {
down: {
use: true,
auto: false //默認不執行下拉刷新的回調
},
up: {
callback: this.$_upCallback,
use: true,
isBounce: false,
offset: 100,
noMoreSize: 10,
loadFull: {
//不滿一屏自動加載
use: false,
delay: 500
},
page: {
num: 0,
size: this.pageSize,
time: null
},
scrollbar: {
use: false
}
}
})
let _this = this
this.instance.showEmpty = function() {
_this.showEmptySlot = true
}
this.instance.removeEmpty = function() {
_this.showEmptySlot = false
}
},
// 上拉回調
$_upCallback(page) {
this.$emit('load', page.num)
},
getInstance() {
return this.instance
},
endByPage(curPagelen, totalPage) {
this.instance && this.instance.endByPage(curPagelen, totalPage)
}
}
}
</script>
測試代碼
<div style="height:300px;border:1px solid green;">
<v-scroll-full ref="myscrollfull" @load="loadData">
<div slot="empty" style="text-align:center">無任何數據</div>
<div v-for="(item,index) in list" :key="index">
{{item}}
</div>
</v-scroll-full>
</div>
<script>
export default {
data () {
return {
list: []
}
},
methods:{
loadData(pageIndex){
setTimeout(()=>{
if(pageIndex==1)this.list=[]
for(var i=0;i<20;i++){
this.list.push(pageIndex+'_'+i)
}
this.$refs.myscrollfull.endByPage(this.list.length,3)
},1000)
}
}
}
</script>