当前位置：首页 > news >正文

uniapp中mescroll的使用

news 来源：原创 2024/5/13 6:25:59

1.视图

<mescroll-uniref="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-DINGTALKprops:{i: Number, // 每个tab页的专属下标index: { // 当前tab的下标type: Number,default(){return 0}}},// #endifdata() {return {downOption:{auto:false // 不自动加载},upOption:{auto:false // 不自动加载},isInit: false // 当前tab是否已初始化}},watch:{// 监听下标的变化index(val){if (this.i === val && !this.isInit) {this.isInit = true; // 标记为truethis.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; // 标记为truethis.mescroll.triggerDownScroll();}},}
}export default MescrollMoreItemMixin;