uniapp中mescroll的使用

1.视图 

<mescroll-uni
		      ref="mescrollRef"
			  @init="mescrollInit"
			  @down="downCallback"
			  @up="upCallback"
			  :up="{auto:false,page:{num:0,size:10}}"
			  :fixed="false"
</mescroll-uni>

2.js

1.  引入js文件，不要忘了mixins
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],

data() {
			return {
				upOption: {        //2.  用来配置无数据时的空显示
					auto: false,
					empty: {
						icon: this.$baseImgUrl+'news_null.png',
						tip: "暂无数据",
					}
				},
    }
    }
}



3.  数据初始化
onLoad() {
			this.mescroll.resetUpScroll()
		},

4.
		methods: {
			 downCallback() {     //下拉刷新
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {     //上滑加载
				getArticleList({    //接口获取数据列表
					page_size:page.size,
					page_no:page.num
				}).then(({
					data
				}) => {
					if (page.num == 1) this.mainlist = [];
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;        //数据返回没有更多数据了
					this.mainlist = this.mainlist.concat(curPageData);   // 数据拼接
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},

3.mescroll-mixins.js文件

// mescroll-body 和 mescroll-uni 通用

// import MescrollUni from "./mescroll-uni.vue";
// import MescrollBody from "./mescroll-body.vue";

const MescrollMixin = {
	// components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册
	// 	MescrollUni,
	// 	MescrollBody
	// },
	data() {
		return {
			mescroll: null //mescroll实例对象
		}
	},
	// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
	onPullDownRefresh(){
		this.mescroll && this.mescroll.onPullDownRefresh();
	},
	// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
	onPageScroll(e) {
		this.mescroll && this.mescroll.onPageScroll(e);
	},
	// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
	onReachBottom() {
		this.mescroll && this.mescroll.onReachBottom();
	},
	methods: {
		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit(mescroll) {
			console.log(mescroll)
			this.mescroll = mescroll;
			this.mescrollInitByRef(); // 兼容字节跳动小程序
		},
		// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
		mescrollInitByRef() {
			if(!this.mescroll || !this.mescroll.resetUpScroll){
				let mescrollRef = this.$refs.mescrollRef;
				if(mescrollRef) this.mescroll = mescrollRef.mescroll
			}
		},
		// 下拉刷新的回调 (mixin默认resetUpScroll)
		downCallback() {
			if(this.mescroll.optUp.use){
				this.mescroll.resetUpScroll()
			}else{
				setTimeout(()=>{
					this.mescroll.endSuccess();
				}, 500)
			}
		},
		// 上拉加载的回调
		upCallback() {
			// mixin默认延时500自动结束加载
			setTimeout(()=>{
				this.mescroll.endErr();
			}, 500)
		}
	},
	mounted() {
		this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
	}
	
}

export default MescrollMixin;

4.mescroll-more-item.js文件

/**
 * mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)
 */
const MescrollMoreItemMixin = {
	// 支付宝小程序不支持props的mixin,需写在具体的页面中
	// #ifndef MP-ALIPAY || MP-DINGTALK
	props:{
		i: Number, // 每个tab页的专属下标
		index: { // 当前tab的下标
			type: Number,
			default(){
				return 0
			}
		}
	},
	// #endif
	data() {
		return {
			downOption:{
				auto:false // 不自动加载
			},
			upOption:{
				auto:false // 不自动加载
			},
			isInit: false // 当前tab是否已初始化
		}
	},
	watch:{
		// 监听下标的变化
		index(val){
			if (this.i === val && !this.isInit) {
				this.isInit = true; // 标记为true
				this.mescroll && this.mescroll.triggerDownScroll();
			}
		}
	},
	methods: {
		// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
		mescrollInitByRef() {
			if(!this.mescroll || !this.mescroll.resetUpScroll){
				// 字节跳动小程序编辑器不支持一个页面存在相同的ref, 多mescroll的ref需动态生成, 格式为'mescrollRef下标'
				let mescrollRef = this.$refs.mescrollRef || this.$refs['mescrollRef'+this.i];
				if(mescrollRef) this.mescroll = mescrollRef.mescroll
			}
		},
		// mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序
			// 自动加载当前tab的数据
			if(this.i === this.index){
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			}
		},
	}
}

export default MescrollMoreItemMixin;

代码007普通

打赏 收藏 海报 链接