uni-app组件之mescroll-uni的简单使用

mescroll-uni 是一个翻页组件，官方文档【点击查看】

 这里对 mescroll-uni 进行了二次封装

在 components 目录下新建一个 up-down-load.vue 

<template>
	<view>
		<mescroll-uni @init="init" :down="downOption" @down="downCallback" :up="upOption" @scroll="scroll" @up="upCallback" :top="top">
			<slot />
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
		name: 'UpDownLoad',
		components: {
			MescrollUni
		},
		props: {
			callback: {
				type: Function
			},
			top: {
				type: Number,
				default: 260
			},
            up:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
					// 下拉刷新的常用配置
					downOption: { 
						use: true, // 是否启用下拉刷新; 默认true
						auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					},
					// 上拉加载的常用配置
					upOption: {
						onScroll:true,
						use: true, // 是否启用上拉加载; 默认true
						auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
						page: {
							num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
							size: 10 // 每页数据的数量,默认10
						},
						noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
						empty: {
							tip: '暂无相关数据'
						}
					},
					mescroll: null
			}
		},
        created(){
            this.assiginObj(this.upOption,this.up)
        },
		methods: {
			init(mescroll) {
				this.mescroll = mescroll;
				this.$emit('init',mescroll)
			},
			downCallback(e){
				// console.log('33333', e)
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			scroll(e) {
				this.$emit('scrolls', e.scrollTop)
			},
			upCallback(mescroll) {
				this.callback(mescroll)
			},
            // 多层对象合并
			assiginObj(target = {},sources= {}){
				let obj = target;
				if(typeof target != 'object' || typeof sources != 'object'){
					return sources; // 如果其中一个不是对象 就返回sources
				}
				for(let key in sources){ 
					// 如果target也存在 那就再次合并
					if(target.hasOwnProperty(key)){
							obj[key] = assiginObj(target[key],sources[key]);
					} else {
							// 不存在就直接添加
							obj[key] = sources[key];
					}
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss">
</style>

在页面中使用

<template>
    <view>
        <!--upDownLoad组件初始化就会调用获取数据列表-->
        <up-down-load :callback="getList" :top="0">
            <block v-for="(item,index) in list" :key="index">
                <text>{{item}}</text>
            </block>
        </up-down-load>
    </view>
</template>

<script>
import upDownLoad from '@/components/customer/up-down-load/up-down-load.vue'
export default {
    components:{
        upDownLoad 
    },
    data(){
        return{
            mescroll:null,//保存该分页组件的mescroll对象
            count:0,//必须将后端返回的数据总数存储下来
            list:[],//数据列表 
        }
    },
    methods:{
        getList(mescroll){
            this.mescroll = mescroll;
            let params = {},that=this;
	        params.page = mescroll.num;//页码
			params.size = mescroll.size;//每页数量
            //这里我使用vuex的actions来请求数据
			that.$store.dispatch('getlist',params).then(res => {
				if(res.code == 0){
					let list = res.data.list;//获取后端返回当前页码的数据
					that.count= res.data.count;//存储后端返回的数据总数
					if (mescroll.num == 1) that.list = [];//如果当前是第一页则置空数据
					that.list = that.list.concat(list);//使用concat方法拼接数据
					mescroll.endBySize(list.length, that.count);//调用endBySize方法,当数据长度为总数的时候结束分页
				}else{
					mescroll.endErr()
				}
			})
        }
    }
}
</script>

---

个人博客：点此进入（http://xueshuai.top）

前端交流群：1063233592

qq群： 1063233592