官网:https://www.mescroll.com/
1.安装
2.全局引入
import MescrollBody from "mescroll-uni/mescroll-body.vue"
import MescrollUni from "mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)
3.封装组件
<template>
<view class="main">
<mescroll-uni :fixed="fixed" ref="mescrollRef" :top="top?top:'0'" :bottom="bottom?bottom:'0'" @topclick="topclick" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
<slot></slot>
</mescroll-uni>
</view>
</template>
<script>
export default{
data(){
return{
isShow: false,
mescroll: undefined,
upOption: {
page: {
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
use:false,
tip: '暂无相关数据'
},
isBounce:false, //ios橡皮筋回弹
textNoMore: '已经到底了',
bgColor:'rgb(240, 243, 244)',
textColor:'rgba(0,0,0,0.45)'
},
}
},
props:[
'top', // 视图上偏移量
'bottom', // 视图下偏移量
'fixed', // 视图下偏移量
],
created() {
console.log('展示')
this.methods('resetMescroll', true)
},
beforeDestroy() {
console.log('销毁')
this.methods('resetMescroll', false)
},
methods:{
resetMescroll (flag) {
this.isShow = flag
},
downCallback () {
console.log("出发下拉")
this.$emit('down', this.mescroll)
},
upCallback (page) {
console.log("出发上拉")
this.$emit('up', this.mescroll, page)
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
this.$emit('init', mescroll)
},
topclick(mescroll){
// mescroll.scrollTo( 0, 300 )
this.$emit('topclick', mescroll)
}
}
</script>
<style lang="scss">
.main{
height: 100%;
}
</style>
4.页面使用组件以及方法
< @down="downCallback" @up="upCallback" ref="mescroll" @init="(mescroll) => {this.mescroll = mescroll}"></scroll-list>
方法:
downCallback(mescroll) {
mescroll.resetUpScroll()
}
upCallback(mescroll, page) {
this.mescroll = mescroll
this.http({
cmd: 'xxx',
input: this.input.value,
success(res) {
// 调用mescroll的Api自动判断是否加载到底部
mescroll.endBySize(curPageLen, this.ticketProgress.output.value.total)
}
}
})
}