文章目录
- 页面结构图
- WXML页面代码
- js代码
- wxss代码
- 总结
- 备注
参考:https://juejin.cn/post/7222855604406796346
页面结构图
一般页面就4个结构
:最外滚动层、数据展示层、暂无数据层、没有更多数据层。
如图:
WXML页面代码
<scroll-view style="height:{{containerHeight}}rpx" scroll-y lower-threshold="100rpx" bindscrolltolower="onReachBottom"><block wx:for='{{records}}' wx:key='this'><view class='list-item' data-index='{{index}}'><!-- 内容 --><view>{{item.name}}</view></view></block><block wx:if="{{isLoadEnd&&records.length==0}}"><view class="center-both" style="height:100%"><view class="col-center"><view class="empty-hint">未搜索到单位~</view></view></view></block><view wx:if="{{isLoadComplete&&records.length!=0}}" class="nomore">没有更多数据了</view>
</scroll-view>
js代码
var app = getApp()Page({/*** 页面的初始数据*/data: {//容器高度 = 屏幕高度 - 顶部高度 - 底部高度 - 28padding - 搜索栏// containerHeight: app.globalData.screenHeight - app.globalData.topHeight - app.globalData.bottomHeight - 28 - 96,containerHeight:1300,pageSize: 20, //请求一页的数据数目currentPage: 1, //当前页数currentparameter: '', //要搜索的数据isLoadEnd: false, //是否单次加载结束isLoadComplete: false, //是否获取到全部数据value: "",records: [], //数据},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.startPage('')},getData(searchKey) {wx.showNavigationBarLoading() // 在标题栏中显示加载// 制作假数据this.fakeRequest()},fakeRequest() {let that = thissetTimeout(() => {let ressult = []--app.globalData.retryCountfor (let i = 1; i <= 20; ++i) {if (i > 10 && app.globalData.retryCount < 0) {break}ressult.push({name: '小明' + i})}//将新数据加进去,通知本次加载结束let records = that.data.recordsif (that.data.currentPage == 1) {records = ressult} else {ressult.forEach(element => {records.push(element)});}that.setData({records: records,isLoadEnd: true,isLoadComplete: ressult.length < that.data.pageSize})// 数据成功后,停止下拉刷新wx.hideLoading()wx.stopPullDownRefresh();wx.hideNavigationBarLoading()}, 1500);},//搜索数据startPage(searchKey) {this.setData({ // 重置数据records: [],currentPage: 1,currentparameter: searchKey,isLoadEnd: false,isLoadComplete: false,})app.globalData.retryCount = 2 //测试假数据this.getData(searchKey)},//下一页nextPage() {this.setData({currentPage: ++this.data.currentPage,isLoadEnd: false,})wx.showLoading({title: '正在加载..'})this.getData(this.data.currentparameter)},//滚动到底部加载onReachBottom() {//上拉加载中,或者数据加载结束,不应该触发下一页if (this.data.isLoadEnd && !this.data.isLoadComplete) {this.nextPage()}},onSearch(e) {//关键词搜索this.startPage(e.detail)},
})
wxss代码
.search {height: 96rpx;
}.empty-hint {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #949494;line-height: 40rpx;margin-top: 48rpx;
}.nomore {width: 100%;box-sizing: border-box;text-align: center;margin: 28rpx 0 0;font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #616161;line-height: 36rpx;
}.list-item {background: #FFFFFF;border-radius: 12rpx;margin: 28rpx 32rpx 0;padding: 24rpx 32rpx;box-sizing: border-box;
}
总结
以上代码只是简单的demo,重点要搞清的是:
- 页面结构
- 获取数据的时候标签
isLoadEnd
、isLoadComplete
以及数据数量和pagesize的比较
备注
js代码中有wx.stopPullDownRefresh();
,这里大概讲一下。
这个API表示的是停止当前页面下拉刷新
,因为其他代码懒粘了这里就只讲一下用法。
具体使用:
- app.js 中
window
中添加:"enablePullDownRefresh": true,
; - 指定页面的js文件中使用
onPullDownRefresh(){}
即可; - 需要马上停止,使用
wx.stopPullDownRefresh()
。