微信小程序 scroll-view 完成上拉加载更多

微信小程序 scroll-view 完成上拉加载更多

需求：

当我们浏览到屏幕末尾时，加载出下一页的内容。

注意实现细节：

1、 由于采用的是 scroll-view 来实现，因此需要竖向滚动，那么 scroll-y 属性的值就必须要设置成 true ,而且scroll-view 要能竖向滚动，必须要设置 高度(height).

2、当我们滚动到屏幕的底部时，会触发 bindscrolltolower 事件，lower-threshold 这个属性用于控制距离屏幕底部还剩下多少像素时就开始触发这个事件。

3、当滚动到屏幕顶部时会触发 bindscrolltoupper 事件

4、由于 bindscrolltolower  在一瞬间可能触发多次，可能会导致发送多次请求来加载数据，我们必须要保证只能有一个请求去发送数据，因此需要用一个变量进行控制，详情见 js 代码中的 scrollToLower 方法。

实现效果：

代码实现：

1、wxml文件的编写

数据加载中...

注意：

1、scroll-y 的值需要设置成 true

2、scroll-view 必须要设置 height 的值

2、wxss文件的编写

.scroll-view-container { background-color: #fff; height:100vh;}/**隐藏 scroll-view 的滚动条*//* ::-webkit-scrollbar { width: 0; height: 0; color: transparent;} */.data-loading { height: 100rpx; line-height: 100rpx; background-color: #eee; text-align: center; font-size: 14px;}.articles-container { border-bottom: 1px solid #eee; margin: 30rpx 10rpx; background-color: #eee;}.articles-container .info { font-size: 12px; margin: 20rpx 0rpx; height: 100%; display: inline-block;}.articles-container .info .avatar { width: 60rpx; height: 60rpx; margin-right: 10rpx; border-radius: 60rpx; display: inline-block; vertical-align: middle;}.articles-container .info .created-at { margin: 0px 20rpx; display: inline-block; vertical-align: middle;}.articles-container .info .category { color: #3399ea; display: inline-block; vertical-align: middle;}

3、js文件的编写

Page({ data: { /** * 用于控制当 scroll-view 滚动到底部时，显示 “数据加载中...” 的提示 */ hidden: true, /** * 用于显示文章的数组 */ articles: [], /** * 数据是否正在加载中，避免用户瞬间多次下滑到底部，发生多次数据加载事件 */ loadingData: false }, onLoad: function(options) { this.loadData(true); }, loadData: function(tail, callback) { var that = this; wx.request({ url: success: function(r) { var oldArticles = that.data.articles, newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles.concat(oldArticles); that.setData({ articles: newArticles }); if (callback) { callback(); } }, error: function(r) { console.info('error', r); }, complete: function() {} }) }, /** * 上滑加载更多 */ scrollToLower: function(e) { console.info('scrollToLower', e); var hidden = this.data.hidden, loadingData = this.data.loadingData, that = this; if (hidden) { this.setData({ hidden: false }); console.info(this.data.hidden); } if (loadingData) { return; } this.setData({ loadingData: true }); // 加载数据,模拟耗时操作 wx.showLoading({ title: '数据加载中...', }); setTimeout(function() { that.loadData(true, () => { that.setData({ hidden: true, loadingData: false }); wx.hideLoading(); }); console.info('上拉数据加载完成.'); }, 2000); }, scrollToUpper: function(e) { wx.showToast({ title: '触顶了...', }) }})

注意：

1、在scrollToLower方法中需要防止多次加载。

4、导航栏标题文字内容

{ "navigationBarTitleText": "scroll-view的上拉刷新"}

完整代码：

scroll-view 完成上拉加载更多代码： ​​https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/scroll-view-pull-up-refresh​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。