uni-app开发小程序mescroll渲染列表，tab切换时，页面没有重置为1

前言

1.mescroll-uni兼容app和小程序，搜索、tab切换、下拉刷新、上拉加载流程示例
2.mescroll-uni列表初次渲染、tab切换页面重置等问题

提示：以下是本篇文章正文内容，下面案例可供参考

一、mescroll是什么？

mescroll的uni版本, 是专门用在uni-app的下拉刷新和上拉加载的组件, 支持一套代码编译到iOS、Android、H5、小程序等多个平台。官网网站，GitHub地址：https://github.com/mescroll/mescroll/tree/master/mescroll-uni/uni_modules/mescroll-uni

二、使用步骤

1.引入库,去GitHub下载mescroll-uni文件夹，放到uni_modules下

代码如下（示例）：

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
mixins: [MescrollMixin], // 使用mixin

提示：在uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni-option,js里面设置empty：{
use: true, // 是否显示空布局
icon: “/static/images/empty/empty_data_icon.png”, // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
}

2.搜索、tab切换、下拉刷新、下拉加载整体逻辑

代码如下（示例）：

<template>
	<view>
		<!-- 页面自定义头部 -->
		<p-nav :isBack="true" :title="headerTitle"> </p-nav>
		<!-- 搜索框和tab切换 -->
		<view class="ware-cont" :style="{ top: tabTop }">
			<view class="search-cont">
				<uni-easyinput
					prefixIcon="search"
					class="uni-mt-5"
					trim="all"
					:placeholder="`请搜索订单/通知单/车船号`"
					v-model="searchValue"
					placeholder-style="font-size:28rpx;color:#BBBBBB;"
					@confirm="searchFilter"
					@clear="clearSearch"
				></uni-easyinput>
			</view>
			<view class="tab">
				<view
					class="tab-item"
					:class="{ actived: current == item.index }"
					v-for="(item, index) in tabList"
					:key="index"
					@click="tabChange(item)"
				>
					<view class="item-text"
						><text>{{ item.name }}</text
						><text v-if="item.count">({{ item.count }})</text></view
					>
					<view class="bottom-line"><view></view></view>
				</view>
			</view>
		</view>
		<!-- 下拉刷新下拉加载 -->
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:up="upOption"
			:down="downOption"
			@down="downCallback"
			@up="upCallback"
			:top="top"
			v-if="mescrollFlag"
		>
			<!-- tab切换后列表中展示字段不同，可以封装组件，带上if-current判断，切换后可以通过mescrollFlag重新渲染，upCallback函数的页码page.num重置成1 -->
			<view class="u-p-24">
				<block>
					<view v-if="current === 0">
						<view
							v-for="(item, index) in dataList"
							:key="index"
							class="u-p-24 radius-20 bg-white"
						>
							<view class="top-tit"> </view>
						</view>
					</view>
					<view v-if="current === 1">
						<view
							v-for="(item, index) in dataList"
							:key="index"
							class="u-p-24 radius-20 bg-white"
						>
							<view class="top-tit"> </view>
						</view>
					</view>
				</block>
			</view>
		</mescroll-body>
		<view class="ios-safety"></view>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {
	getWareList,
	postReceiving,
	postCancelReceipt,
} from "@/api/warehouseing.js";
import tool from "@/utils/tool";

export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			searchValue: "", // 搜索框值
			upOption: {
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textNoMore: "没有更多数据了",
			},
			downOption: {
				auto: false, // 是否在初始化后,自动执行downCallback; 默认true
			},
			dataList: [], //列表list
			current: 0,
			tabList: [
				{
					name: "未收货",
					index: 0,
					count: null,
				},
				{
					name: "已收货",
					index: 1,
					count: null,
				},
			],
			isGoBack: false, // 是否返回
			headerTitle: "入库作业", //标题
		};
	},
	computed: {
		top() {
			return uni.$u.sys().statusBarHeight + 140 + "px";
		},
		tabTop() {
			return uni.$u.sys().statusBarHeight + 44 + "px";
		},
	},
	methods: {
		// 切换tab
		tabChange(val) {
			this.searchValue = "";
			this.current = val.index;
			this.initMesrollist();
		},

		/**
		 * 下拉刷新的回调
		 */
		downCallback() {
			this.searchValue = "";
			this.initMesrollist();
		},
		/**
		 * 上拉加载的回调,进入页面，自动初始化执行
		 */
		upCallback(page) {
			this.getDataList(page.num);
		},
		// 获取列表
		getDataList(pageNum) {
			const params = {
				pageNum: pageNum,
				pageSize: 10,
				start: 1,
				key: this.searchValue,
			};
			// 列表加载数据
			getWareList(params)
				.then((res) => {
					const {
						data: { list = [], total },
					} = res || {};
					this.mescroll.endBySize(list.length, total);
					// 成功的回调,隐藏下拉刷新的状态
					const dataArr = list.map((item) => {
						return {
							...item,
							qtyReceiving: item.qtyReceiving === null ? 0 : item.qtyReceiving,
						};
					});
					this.dataList =
						pageNum === 1 ? dataArr : this.dataList.concat(dataArr);
				})
				.catch(() => {
					// 失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				});
		},
		//重新渲染滚动条，内置page的num初始化1
		initMesrollist() {
			this.dataList = []; // 先置空列表,显示加载进度
			this.mescrollFlag = false;
			this.$nextTick(() => {
				this.mescrollFlag = true;
			});
		},
		//完成发货-操作成功重置示例
		submit(row) {
			postReceiving(params).then((res) => {
				if (res.errno === 0) {
					//操作成功后，重置搜索和重新渲染
					this.searchValue = "";
					this.initMesrollist();
				}
			});
		},
	},
};
</script>

---

总结

1.mescroll-uni列表初次自动执行upCallback
2.通过mescrollFlag控制阀，tab切换、搜索时重新渲染mescrol，页码初始化为1，重点这个函数：initMesrollist