uniapp+uview1:原生列表加载,下拉刷新,上拉加载
其实,用uniapp已经4年了,写了挺多个小程序,app,我始终坚定,原生的就是最好的,比如原生的导航栏,原生的预览图片,原生的下拉刷新,上拉加载。。。拒绝花里胡哨!之所以写这篇文章是因为,我在uview的交流群里面看到,有相当一部分人关于列表加载这里的处理,处理方式写的很乱,可能上一个列表用一种方法,下个列表就换另一种方式了,我在这里奉上自己多年的列表处理方式,以供参考。。。1. pages.j
其实,用uniapp已经4年了,写了挺多个小程序,app,我始终坚定,原生的就是最好的,比如原生的导航栏,原生的预览图片,原生的下拉刷新,上拉加载。。。拒绝花里胡哨!
之所以写这篇文章是因为,我在uview的交流群里面看到,有相当一部分人关于列表加载这里的处理,处理方式写的很乱,可能上一个列表用一种方法,下个列表就换另一种方式了,我在这里奉上自己多年的列表处理方式,以供参考。。。
1. pages.json里面,我们需要去配置当前页面 下拉刷新,上拉加载的一些配置
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "index",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
2. 页面如何写,我先说说我的做法啊;
1.进入页面,首先我们当然是需要请求接口获取列表,但是这个是有时间的,所以为了提升用户体验,我们先去展示loading图;
2.待响应完成后,再展示我们的列表,如果列表为空,那么我们就去直接展示一个空列表占位图,告诉用户,我这里没数据
3.如果有数据,那就展示我们的列表
先来模拟一个请求的数据吧 list.js
let result = {
"code": 200,
"msg": "操作成功",
"data": [{
"id": 1,
"name": "联想"
}, {
"id": 2,
"name": "苹果"
}, {
"id": 3,
"name": "索尼"
}, {
"id": 4,
"name": "华硕"
}, {
"id": 5,
"name": "ThinkPad"
}, {
"id": 6,
"name": "惠普HP"
}, {
"id": 7,
"name": "戴尔 DELL"
}, {
"id": 8,
"name": "宏碁Acer"
}, {
"id": 9,
"name": "神舟 Hasee"
},
{
"id": 10,
"name": "三星SAMSUNG"
}
]
}
export function httpList(params) {
console.log(params)
// 假设到第五页的时候,没数据了,返回了空数组
return new Promise((resolve, reject) => {
if (params.pageNum === 5) {
resolve({
code: 200,
msg: '操作成功',
data: []
})
} else {
setTimeout(() => {
resolve(result)
}, 300)
}
})
}
index.vue
<template>
<view>
<view class="" v-if="loading">loading...</view>
<template v-else>
<view v-if="list.length > 0">
<view class="item" v-for="(item, index) in list" :key="index">{{ `${index + 1}--${item.name}` }}</view>
<u-loadmore :status="status" />
</view>
<view v-else><u-empty text="所谓伊人,在水一方" mode="list"></u-empty></view>
</template>
</view>
</template>
<script>
import { httpList } from './list.js';
export default {
data() {
return {
// 请求参数
params: {
pageNum: 1,
pageSize: 10
},
status: 'loadmore', //控制上拉加载的状态
loading: true, //控制在响应回来前展示loading加载
list: [] //要展示的列表
};
},
onLoad() {
this.getList(); //获取列表
},
// 下拉刷新
onPullDownRefresh() {
this.status = 'loadmore';
this.params.pageNum = 1;
this.getList();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 1000);
},
// 上拉加载
onReachBottom() {
if (this.status !== 'nomore') {
this.status = 'loading';
this.params.pageNum++;
this.getList();
}
},
methods: {
// 获取列表
async getList() {
const resp = await httpList(this.params);
if (resp.code === 200) {
let { pageNum, pageSize } = this.params;
let { data } = resp;
if (data.length < pageSize) this.status = 'nomore'; //如果响应值列表的长度小于我们所请求的页数 那就意味已经没有下一页了
if (pageNum === 1) this.list = data;
//如果pagenum是第一页,直接赋值
else this.list = [...this.list, ...data]; //不是第一页 将原数组和得到的数组进行合并
}
if (this.loading) {
setTimeout(() => {
this.loading = false;
}, 1000);
}
}
}
};
</script>
<style lang="scss" scoped>
.item {
height: 150rpx;
border-bottom: solid 1px #19be6b;
}
</style>
展示效果:
列表加载展示效果
大概就是这个样子,有点丑,多多包涵,可以参考一下!
如果需求 是必须用到自定义的,在微信小程序多一点,很多老板认为微信下拉刷新的三个点很丑。。。那么我也推荐一个 mescroll-uni
更多推荐
所有评论(0)