文章目录
一、效果图：
二、实现过程：
1、安装和引入uview-ui：
首先：
javascript
//若不存在package.ison文件则需要先npm init -y生成，再下面的代码。
npm install uview-ui其次：main.js和pages.json文件中引入
javascript
import uView from "uview-ui";
Vue.use(uView);
javascript
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},2、index.vue
javascript
<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 (建议有公共人员维护)
javascript
/**
* 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);
},
}
}