只要保证在最外层父页面中引入了下面文件
import MescrollCompMixin from "mescroll-uni/mixins/mescroll-comp.js";
并在自己定义的组件上加上ref="mescrollItem"，这名称是固定的，不能改。
子组件名称可随意，但ref是要加上的
如果还有子子组件，则继续在当前子组件加ref="mescrollItem"
image.png
当有多个子组件使用mescroll，父页面中
<template>
<view>
<!-- 菜单 -->
<view class="top-warp">
<view class="tip">每个菜单列表仅初始化一次,切换菜单缓存数据</view>
<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :tab-width="130"></me-tabs>
</view>
<!-- 子组件 (i: 每个tab页的专属下标; index: 当前tab的下标) -->
<!-- 如果每个子组件布局不一样, 可拆开写 (注意ref只能为 "mescrollItem下标" 的格式,
另外 :i="下标" :index="tabIndex"也是固定写法,tabIndex不能写成别的参数) : -->
<!-- <home ref="mescrollItem0" :i="0" :index="tabIndex"></home>
<shopcart ref="mescrollItem1" :i="1" :index="tabIndex"></shopcart>
<user ref="mescrollItem2" :i="2" :index="tabIndex"></user> -->
<mescroll-item ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem2" :i="2" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem3" :i="3" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem4" :i="4" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem5" :i="5" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem6" :i="6" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem7" :i="7" :index="tabIndex" :tabs="tabs"></mescroll-item>
<mescroll-item ref="mescrollItem8" :i="8" :index="tabIndex" :tabs="tabs"></mescroll-item>
<!-- 如果每个子组件布局一样, 则可使用v-for (注意v-for的ref="mescrollItem"必须是固定值; 另外支付宝小程序不支持此v-for的写法)-->
<!-- <mescroll-item ref="mescrollItem" v-for="(tab,i) in tabs" :key="i" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item> -->
</view>
</template>
<script>
import MescrollItem from "./mescroll-more-item.vue";
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
export default {
mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期
components: {
MescrollItem
},
data() {
return {
tabs: [{name:'全部'}, {name:'奶粉'}, {name:'面膜'}, {name:'图书'}, {name:'果汁'}, {name:'奶瓶'}, {name:'美素'}, {name:'花王'}, {name:'韩蜜'}],
tabIndex: 0 // 当前tab下标,必须与mescroll-more.js对应,所以tabIndex是固定变量,不可以改为其他的名字
}
},
onShow() {
// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
// if(this.canReset){
// let curMescroll = this.getMescroll(this.tabIndex)
// curMescroll && curMescroll.resetUpScroll()
// }
// this.canReset = true
}
}
</script>
子组件中
<template>
<!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
<view v-show="i === index">
<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
<mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
<!-- 数据列表 -->
<good-list :list="goods"></good-list>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
import {apiSearch} from "@/api/mock.js"
export default {
mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
props:{
i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
type: Number,
default(){
return 0
}
},
tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
type: Array,
default(){
return []
}
}
},
data() {
return {
downOption:{
auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
},
upOption:{
auto:false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '去看看'
}
},
goods: [] //列表数据
}
},
methods: {
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
// this.i: 每个tab页的专属下标
// this.index: 当前tab的下标
let word = this.tabs[this.i].name
apiSearch(page.num, page.size, word).then(curPageData=>{
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
this.mescroll.endSuccess(curPageData.length);
//设置列表数据
if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
this.goods=this.goods.concat(curPageData); //追加新数据
}).catch(()=>{
//联网失败, 结束加载
this.mescroll.endErr();
})
},
//点击空布局按钮的回调
emptyClick(){
uni.showToast({
title:'点击了按钮,具体逻辑自行实现'
})
}
}
}
</script>
网友评论