记录uni-app小程序中,使用swiper标签页与mescroll下拉刷新和上拉加载的组件,产生冲突的问题解决
其中 如果在u-view组件的swiper中使用:例如
<swiper-item class="swiper-item" :class="{'selectActive':swiperCurrent==2}">
<scroll-view lower-threshold='1px' class="wrap" scroll-y>
<transfer-order-list :i="0" :index="0"></transfer-order-list>
</scroll-view>
</swiper-item>
使用下拉刷新组件时不要用mescroll-body 要用 mescroll-uni
官网说明:绝大部分情况应优先考虑使用 mescroll-body 因为支持原生组件,且性能好
只有当需要局部区域滚动 (如嵌在弹窗,浮层,swiper中), 才考虑 mescroll-uni
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
// @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致)
// :down="downOption" :up="upOption" 绝大部分情况无需配置
// :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
// 字节跳动小程序 ref="mescrollRef" 必须配置
// 此处支持写入原生组件
<view v-for="data in dataList"> 数据列表... </view>
</mescroll-body>
代码示例:
<template>
<!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
<view v-show="i === index" style="background-color: #f5f5f5;">
<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" top="40" :down="downOption"
@down="downCallback" :up="upOption" @up="upCallback" :fixed="fixedOption" @emptyclick="emptyClick">
<!-- 数据列表 -->
<order-list @reflushScroll="reflushScroll" :list="appointList"></order-list>
</mescroll-uni>
</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 "@/common/api/mock/mock.js"
import orderList from "./transferOrderListcopy.vue"
export default {
components: {
orderList
},
mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
props: {
i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
type: Number,
default () {
return 0
}
}
},
data() {
return {
downOption: {
auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
},
fixedOption:true,
upOption: {
auto: false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty: {
tip: '~ 空空如也 ~', // 提示
btnText: this.isDriver ? "" : '去下单'
}
},
appointList: [] //列表数据
}
},
methods: {
reflushScroll() {
this.mescroll.resetUpScroll()
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
debugger
let that = this
let params = {
page: page.num,
limit: page.size,
userId: that.$queue.getData('userInfo').userId,
carNumber: that.$queue.getData('userInfo').carNumber,
userType: that.$queue.getData('userInfo').userType
}
that.$api.getTransportOrderList(params).then(({
data
}) => {
if (data && data.code === 0) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
that.mescroll.endSuccess(data.page.list.length);
//设置列表数据
if (page.num == 1) {
that.appointList = []; //如果是第一页需手动制空列表
}
that.appointList = that.appointList.concat(data.page.list); //追加新数据
}
}).catch(() => {
//联网失败, 结束加载
that.mescroll.endErr();
})
},
//点击空布局按钮的回调
emptyClick() {
// uni.showToast({
// title:'点击了按钮,具体逻辑自行实现'
// })
}
}
}
</script>