记录uni-app小程序中，使用swiper标签页与mescroll下拉刷新和上拉加载的组件，产生冲突的问题解决

记录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>

mescroll组件链接

代码示例：
<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>