wxml:
<view class='view-container'> <block wx:for='{{articles}}' wx:key='{{item.id}}'> <view class='articles-container'> <view class='info'> <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}} <text class='created-at'>{{item.created_at}}</text> <text class='category'>{{item.category}}</text> </view> </view> </block> <view class='data-loading' hidden='{{hidden}}'> 数据加载中... </view> </view>
wxss:
.view-container { background-color: #fff; } .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 { 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; }
js:
Page({ data: { /** * 需要访问的url */ urls: [ 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0', 'https://www.csdn.net/api/articles?type=new&category=arch', 'https://www.csdn.net/api/articles?type=new&category=ai', 'https://www.csdn.net/api/articles?type=new&category=newarticles' ], /** * 当前访问的url索引 */ currentUrlIndex: 0, /** * 获取到的文章 */ articles: [], /** * 控制上拉到底部时是否出现 "数据加载中..." */ hidden: true, /** * 数据是否正在加载中,避免数据多次加载 */ loadingData: false }, onLoad: function (options) { this.loadData(false); }, /** * 加载数据 */ loadData: function (tail, callback) { var that = this, urlIndex = that.data.currentUrlIndex; wx.request({ url: that.data.urls[urlIndex], success: function (r) { var oldArticles = that.data.articles, newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles; that.setData({ articles: newArticles, currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1 }); if (callback) { callback(); } }, error: function (r) { console.info('error', r); }, complete: function () { } }); }, /** * 监听用户下拉动作 */ onPullDownRefresh: function () { console.info('onPullDownRefresh'); var loadingData = this.data.loadingData, that = this; if (loadingData) { return; } // 显示导航条加载动画 wx.showNavigationBarLoading(); // 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见 // wx.showLoading({ // title: '数据加载中...', // }); setTimeout(function () { that.loadData(false, () => { that.setData({ loadingData: false }); wx.stopPullDownRefresh(); // wx.hideLoading(); wx.hideNavigationBarLoading(); console.info('下拉数据加载完成.'); }); }, 1000); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.info('onReachBottom'); 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('上拉数据加载完成.'); }, 1000); } })