60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
|
/**
|
||
|
|
* 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;
|