【uniapp】uniapp+uview-ui+mixins实现搜索+上拉加载+加载动画功能：

---

一、效果图：

二、实现过程：

1、安装和引入uview-ui：

首先：

//若不存在package.ison文件则需要先npm init -y生成，再下面的代码。
npm install uview-ui

其次：main.js和pages.json文件中引入

import uView from "uview-ui";
Vue.use(uView);

"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

2、index.vue

<template><view class="regionalregulation_contanier" ref="listContent"><!-- 查询条件部分 --><u-sticky><view style="padding: 20rpx;background-color: #fff;border-bottom: 1px solid #dfe2e5;"><u-search v-model="queryModel.keyworld" @search="getDataList(true)" @clear="getDataList(true)" /></view></u-sticky><!-- 查询结果部分 --><template v-if="loadingPage"><u-loading-page loading loading-text="正在加载中..." /></template><template v-else><view class="content_list" v-if="tableData.length"><scroll-view :scroll-y="true" :scroll-top="0"><view class="content" v-for="(item,index) in tableData" :key="index" @click="handleClick(item,index)"><text>{{Number(index)+1}}</text></view><u-loadmore :status="loadingStatus" v-if="isLoadingMore" @loadmore="getDataList" /></scroll-view><u-back-top :scroll-top="scrollTop" /></view><view class="content_list" v-else><u-empty mode="data" icon="../../static/nodata.jfif" text="暂无数据" /></view></template></view>
</template><script>//引入实现搜索+上拉加载+加载动画功能的混入减少该相同界面代码量import { ListMixin } from "@/utils/mixins/listMixins" export default {mixins: [ListMixin],components: {},data() {return {apiUrl: { //存储交易接口list: "",add: "",edit: "",delete: "",},}},onLoad() {},methods: {},}
</script><style lang="scss" scoped>.regionalregulation_contanier {width: 100%;height: 100%;display: flex;flex-direction: column;.content_list {min-height: 0;flex: 1;overflow-y: auto;padding: 0rpx 20rpx;margin-top: 10rpx;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-content: center;box-sizing: border-box;uni-scroll-view {height: 100%;.content {height: 400rpx;padding: 10rpx;margin-bottom: 10rpx;box-shadow: inset 0 0 20rpx rgba(0, 0, 0, 0.2);border-radius: 10rpx;box-sizing: border-box;}}}}
</style>

3、listMixins.js (建议有公共人员维护)

/**
* 1、该混入聚成了搜索+上拉加载+加载动画功能一些公共功能，可以减少代码量
* 2、优点：适用于项目人数少且时间紧；减少交易字段的命名提高交易可维护性
* 3、缺点：维护较难，需要先理清混入字段与交易字段
* 4、不需要混入的交易可以将混入的代码丢到index.vue
*/
import Vue from 'vue'export const ListMixin = {data() {return {queryModel: {}, //查询条件page: { //查询条件分页信息pageNum: 1,pageSize: 10,},loadingPage: true, //页面加载动画-展示骨架屏tableData: [], //查询结果isLoadingMore: false, //是否展示加载动画loadingStatus: "loadmore", //加载动画状态scrollTop: 0, //返回顶部滚动距离isError: false,}},async onLoad() {await this.getDataList();},onPageScroll(e) {this.scrollTop = e.scrollTop;},async onReachBottom() {this.isLoadingMore = true;if (["loading", "nomore"].includes(this.loadingStatus)) return;!this.isError ? this.page.pageNum += 1 : ""; //报错重新加载时,页码不需要增加this.loadingStatus = "loading";await this.getDataList();},methods: {// 初始化数据async initData() {uni.pageScrollTo({ scrollTop: 0, duration: 300 });this.page = { //查询条件pageNum: 1,pageSize: 10,};this.tableData = []; //查询结果this.isLoadingMore = false; //是否展示加载动画this.loadingStatus = "loadmore"; //加载动画状态this.scrollTop = 0; //返回顶部滚动距离},// 查询数据async getDataList(isInit) {const that = this;this.isError = false;this.loadingStatus = "loading";setTimeout(async () => {if (typeof isInit == "boolean" && isInit) await this.initData();let param = Object.assign({}, this.queryParam, this.page);console.log("请求参数：", param);// const ret = await this.getAction(this.apiUrl.list,param);const ret = {code: this.page.pageNum > 2 ? 1 : 0,data: this.page.pageNum > 3 ? [] : [{ id: 1, name: "1" },{ id: 2, name: "2" },{ id: 3, name: "3" },{ id: 4, name: "4" },{ id: 5, name: "5" },{ id: 6, name: "6" },{ id: 7, name: "7" },{ id: 8, name: "8" },{ id: 9, name: "9" },{ id: 10, name: "10" },],msg: this.page.pageNum > 2 ? "查询失败" : "查询成功",};if (ret.code == 0) {this.loadingPage = false;this.tableData = [...this.tableData, ...ret.data];this.loadingStatus = ret.data.length < this.page.pageSize ? "nomore" : "loadmore";console.log("当前获取到的数据：", ret, "查询结果内容：", this.tableData);} else {document.body.style.overflow = 'hidden'; //禁止滚动uni.showModal({title: '报错提示',content: ret.msg,confirmText: "重新加载",success: async function(res) {if (res.confirm) {document.body.style.overflow = ""; //恢复滚动await that.getDataList();} else if (res.cancel) {that.loadingPage = false;document.body.style.overflow = "";}}});if (this.tableData.length == 0) return; //无数据时不需要处理this.loadingStatus = "loadmore"; //还原加载动画状态this.isError = true; // 解决onReachBottom下拉到底pageNum+1}}, 2000)},// 点击事件handleClick(item, index) {console.log("点击获取的数据:", item, index);},}
}