在使用uni-app做app和小程序时,经常会遇到一些列表,这个时候就需要列表能够实现上拉加载更多、下拉刷新的功能,具体效果如下:
此功能比较简单,就不过多介绍了直上代码:
HTML部分
// 活动列表
<view class="activityList">
// 每一项活动(可替换)
<view class="activityItem" v-for="(item,index) in activeList" :key='index'>
<view class="top">
<view class="user">
<image :src="item.Photo ? $ImgUrl + item.Photo : baseUrl" mode="scaleToFill"></image>
{{item.UserName}}
</view>
<view class="time">
{{item.CreaTime}}
</view>
</view>
</view>
// 加载提示信息
<view class="loading">{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</view>
</view>
<!-- 回到顶部 -->
<view class="goTop" @click="goTop" :style="{'display':(flag===true? 'block':'none')}">
<text class="iconfont icon-xiangshang"></text> // iconfont icon-xiangshang 引入的阿里图标
</view>
javascript部分
// 后台接口
import {
StudentactivityList
} from '../../api/activity.js'
export default {
data() {
return {
flag: false,
loadingType: 0,
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
params: {
Page: 1,
PageCount: 5
},
activeList: []
}
},
onShow() {
this.getList()
},
// 下拉刷新
onPullDownRefresh() {
this.params.Page = 1
this.getList();
},
// 触底加载
onReachBottom() {
if (this.loadingType != 0) { //loadingType!=0;直接返回
return false;
}
this.loadingType = 1;
this.params.Page++; //每触底一次 page +1
uni.showNavigationBarLoading(); //显示加载动画
StudentactivityList(this.params).then(res => {
this.activeList = [...this.activeList, ...res.data.list]
this.typeConversion()
this.loadingType = 0; //将loadingType归0重置
uni.hideNavigationBarLoading(); //关闭加载动画
if (this.params.Page == res.data.pages) { //没有数据
this.loadingType = 2;
uni.hideNavigationBarLoading(); //关闭加载动画
return false;
}
}, res => {
// 接口提示暂无数据
this.loadingType = 2; //将loadingType归0重置
uni.hideNavigationBarLoading(); //关闭加载动画
uni.stopPullDownRefresh()
})
},
methods: {
// 获取列表
getList() {
this.loadingType = 1;
uni.showNavigationBarLoading();
StudentactivityList(this.params).then(res => {
this.activeList = res.data.list
this.typeConversion()
uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
this.loadingType = 0;
if (this.params.Page == res.data.pages) { //没有数据
this.loadingType = 2;
uni.hideNavigationBarLoading(); //关闭加载动画
return false;
}
}, res => {
// 接口提示暂无数据
this.loadingType = 2; //将loadingType归0重置
uni.hideNavigationBarLoading(); //关闭加载动画
uni.stopPullDownRefresh()
this.activeList = []
})
},
// 回到顶部
goTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
},
// 回到顶部显示
onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
if (e.scrollTop > 300) { //当距离大于600时显示回到顶部按钮
this.flag = true
} else { //当距离小于600时隐藏回到顶部按钮
this.flag = false
}
},
}
}
css部分:
.goTop {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background-color: $uni-color-primary;
text-align: center;
line-height: 50rpx;
position: fixed;
bottom: 180rpx;
right: 60rpx;
text {
color: #FFFFFF;
}
}
.loading {
text-align: center;
line-height: 80px;
font-size: 28rpx;
}
样式部分只包含了回到顶部和加载文字,其他样式未复制,项目结束记录一下,如果各位大佬有更方便的解决办法也可以在评论里留下,互相学习进步
更多文章__> >> 码砖猿的技术博客