<template>
<mescroll-vue
ref="mescroll"
:down="mescrollDown"
:up="mescrollUp"
@init="mescrollInit"
>
<div id="mecroll_dataList">
<slot></slot>
</div>
</mescroll-vue>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
name: "mescrollComponent",
components: {
MescrollVue,
},
data() {
return {
mescroll: null,
mescrollDown: {
callback: this.downCallback,
},
mescrollUp: {
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
htmlNodata: '<p class="upwarp-nodata">更多精彩敬请期待</p>', //无数据的布局
callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
page: {
num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10, // 每页数据的数量
},
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
toTop: {
src: "./static/mescroll/mescroll-totop.png", // 回到顶部按钮的图片路径,支持网络图
},
empty: {
// 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
warpId: "mecroll_dataList", // 父布局的id;
icon: "./static/mescroll/mescroll-empty.png", // 图标,支持网络图
tip: "暂无相关数据~", // 提示
btntext: "去逛逛 >", // 按钮,默认""
btnClick() {
// 点击按钮的回调,默认null
alert("点击了按钮,具体逻辑自行实现");
},
},
lazyLoad: {
use: true, // 是否开启懒加载,默认false
},
},
};
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback(page, mescroll) {
// 上拉加载
this.$emit("load", page, mescroll);
},
downCallback(mescroll) {
this.$emit("downCallback", mescroll);
},
},
beforeRouteEnter(to, from, next) {
// 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
next((vm) => {
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
});
},
beforeRouteLeave(to, from, next) {
// 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
next();
},
};
</script>
<style scoped>
</style>
<template>
<div class="betterScrollBox">
<div class="top">
顶部
</div>
<div class="center">
<Mescroll ref="myscroll" @downCallback="downCallback" @load="getList">
<ul>
<li v-for="item in dataList" :key="item">
{{item}}
</li>
</ul>
</Mescroll>
</div>
<div class="bottom">
底部区域
</div>
</div>
</template>
<script>
import Mescroll from './../components/mescroll'
export default {
data () {
return {
dataList:[],
pageNo:1,
mescroll:null,
total:0
}
},
components:{
Mescroll
},
computed:{
searchParmas(){
const {pageNo} = this
return {
pageNo,
pageSize:10
}
}
},
mounted(){
},
methods:{
getList(page,mescroll){
this.pageNo = page.num
if(!this.mescroll){
this.mescroll = mescroll
}
setTimeout(()=>{
const {pageNo} = this
if(pageNo === 1){
this.dataList = []
}
let backList = []
let lastData = this.dataList.length
for (let index = lastData; index < lastData+10; index++) {
backList.push(index)
}
this.dataList = this.dataList.concat(backList)
this.$nextTick(()=>{
// 判断是否还有下一页
this.mescroll.endSuccess(backList.length,this.dataList.length < 13)
// 如果是第一页,并且请求到的数据为空,那么会显示空布局
})
},1000)
},
downCallback(mescroll){
this.pageNo = 1
mescroll.resetUpScroll()
},
changeTab(){
// 如果有切换状态的操作,
this.pageNo = 1
this.dataList = []
this.mescroll.resetUpScroll()
}
}
}
</script>
<style scoped>
ul li{
padding: 20px 0;
text-align: center;
}
.betterScrollBox .top{
height: 44px;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 44px;
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 111;
}
.betterScrollBox .center{
position: fixed;
top: 44px;
width: 100%;
bottom: 50px;
}
.bottom{
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: forestgreen;
text-align: center;
line-height: 50px;
color: #fff;
}
</style>