一、需求

留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据

二、代码

1、pages.json

2、messageBoard.vue

用了 uniapp 提供的组件： uni-load-more.vue

<uni-load-more :status="loadingText" :contentText="contentText" ></uni-load-more>

const loadingTextObj = {more: 'more',noMore: 'noMore',loading: 'loading'
}
const contentTextObj = {contentdown: '上拉显示更多',contentrefresh: '正在加载...',contentnomore: '没有更多数据了'
}
data() {return {// 分页功能loadingText: loadingTextObj.more,loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomorecontentText: contentTextObj,}
},
//下拉刷新
onPullDownRefresh() {console.log('下拉刷新')this.initPageInfo()
},
//触底加载更多
onReachBottom(e) {const _this = thisconsole.log('触底加载更多')if (timer != null) {clearTimeout(timer)}timer = setTimeout(function() {if (_this.loadingType === 2) return falseelse _this.doMoreData()}, 1000)
},
methods: {initPageInfo() {const _this = thispage = 1this.messageInfo = []this.doLoadingStatus(0)uni.showNavigationBarLoading()// 接口联调this.doMessageBoard()return falsesetTimeout(() => { // 这里面是模拟的假数据page++ // 得到数据之后page+1_this.messageInfo = messageData // messageData为自己造的假数据uni.hideNavigationBarLoading()uni.stopPullDownRefresh() // 得到数据后停止下拉刷新}, 1000)},// 加载状态doLoadingStatus(type) {if (type === 0) {this.loadingType = 0this.loadingText = loadingTextObj.more}else if (type === 1) {this.loadingType = 1this.loadingText = loadingTextObj.loading} else if (type === 2) {this.loadingType = 2this.loadingText = loadingTextObj.noMore}},// 获取留言板列表doMessageBoard() {const _this = thislet opts={url: '/***',method: 'POST'}let param={page: page,pageSize: pageSize,}this.HTTP.httpFromDataRequest(opts, param).then(res => {if(res.data.success){const { data } = res.dataif (data.list === null) {_this.doLoadingStatus(2)uni.hideNavigationBarLoading() // 关闭加载动画return}page++ // 得到数据之后page+1if (_this.messageInfo.length === 0) _this.messageInfo = data.listelse _this.messageInfo = [..._this.messageInfo, ...data.list]if (data.list.length < pageSize) {_this.doLoadingStatus(2)} else{ // 将loadingType归0重置_this.doLoadingStatus(0)}uni.hideNavigationBarLoading(); // 关闭加载动画uni.stopPullDownRefresh() // 得到数据后停止下拉刷新}else{uni.showToast({title: res.data.message})}},error => {console.log(error);})},// 分页功能---加载更多数据doMoreData() {const _this = thisif (this.loadingType !== 0) {// loadingType != 0 直接返回return false}this.doLoadingStatus(1)uni.showNavigationBarLoading()this.doMessageBoard()return falsesetTimeout(() => {const res = {data: null}res.data = '111'if (res.data === null) {_this.loadingType = 2_this.loadingText = loadingTextObj.noMoreuni.hideNavigationBarLoading() // 关闭加载动画return}page++ // 每触底一次 page +1_this.messageInfo = [..._this.messageInfo, ...messageData]_this.loadingType = 0; // 将loadingType归0重置_this.loadingText = loadingTextObj.moreuni.hideNavigationBarLoading(); // 关闭加载动画}, 3000)}, // end doMoreData}