一、代码环境
一开始用的是scroll-view组件,但是真机运用的时候发现上拉加载更多的时候,数据有跳动,对用户交互及其不友好,所以决定修改上拉加载更多的效果
我用的是wepy框架,参照多个网上文档,也参照官方文档主要用的是onReachBottom()事件
二、代码
视图层:
<repeat for={{recordList}} key=index index=index item=item > <view class=zan-panel> <view class=zan-cell> <view class=zan-cell__bd>变更内容:{{item.typeText}}</view> <view class=zan-cell__ft>¥<text style=padding-left:4rpx>{{item.totalFee/100}}</text></view> </view> <view class=zan-cell> <view class=zan-cell__bd zan-font-12 zan-c-gray-dark>变更时间:{{item.updateTime}}</view> </view> </view> </repeat> <block wx:if={{recordList.length > pageSize}}> <block wx:if={{updateLoadShow}}> <updateLoad :loading=updateLoadShow></updateLoad> </block> <view class=doc-description zan-center style=font-size:12px; wx:else> <text>{{updateLoadTxt}}</text> </view> </block>
说明:如果数据不超过一屏,向上拉回无法触发onReachBottom()事件,所以我做的处理是 “ (当前屏幕高度 / 实际一个列表循环高度 )+1”,保证数据能超过一屏。
onLoad() { // 获取系统消息 wepy.getSystemInfo({ success: (res) => { this.height = res.windowHeight this.pageSize = Math.round(res.windowHeight / 103) + 1 this.$apply() } }) }
逻辑层写:
// 上拉加载 onReachBottom() { // 上拉加载更多loading this.updateLoadShow = true let _length = this.recordList.length // 列表长度与列表总数对比 if (_length === this.pagtotal) { setTimeout(() => { this.updateLoadShow = false this.$apply() }, 1000) } else { // 当前页码加一 this.pageNum++ // 更新数据 this.getData() } } // 获取数据 getData() { const pageNum = this.pageNum api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => { if (pageNum === 1) { this.recordList = data.list this.pagtotal = data.totalRow } else { this.recordList = this.recordList.concat(data.list) } this.loadingShow = false this.updateLoadShow = false this.$apply() }) }
相关推荐:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。