前言
在开始之前,你务必在项目中安装并配置好 uView,安装 配置
这里就不再详细说怎么安装配置了,官方文档已经说得很清楚了,不懂在评论区留言 😊
重要代码
<view class="loading" v-if="isShow">
<u-loading mode="circle" color="blue" size="29"></u-loading>
<text>正在加载更多</text>
</view>
var timer = null,
_self;
export default {
onLoad() {
_self = this;
},
onReachBottom() {
//触底的时候请求数据,即为上拉加载更多
//为了更加清楚的看到效果,添加了定时
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// 注意这里是我自己自定义的方法,返回的页面数据
_self.nextPage();
}, 1000);
},
methods: {
// 这里看不懂,没关系,就是自己自定义的方法
nextPage() {
if (!this.isBottom) {
this.queryParams.pageNum++;
let newNewsList;
this.$u.api.getNewsList(this.queryParams).then(res => {
if (res.data.length > 0) {
newNewsList = res.data
this.newsList = [...this.newsList, ...newNewsList];
} else {
this.isShow = false
}
})
}
}
}
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 90rpx;
margin-bottom: 20rpx;
text {
margin-left: 20rpx;
font-size: 30rpx;
}
}
总结
- 引入uView 的 loading 组件,前提是已经安装和配置好 uView
- 为了更加清楚的看到效果,在 onReachBottom() 生命周期钩子里添加了定时器