微信小程序实现上拉加载下拉刷新
使用小程序默认提供方法。
(1). 在xxx.json 中开启下拉刷新，需要设置backgroundColor，或者是backgroundTextStyle ，因为加载的动画可能会是白色背景，会看不清。
{ "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": "通告列表", "enablePullDownRefresh": true, "backgroundColor": "#ffffff", "backgroundTextStyle": "dark" }
(2). 在 js 中处理逻辑
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { // 标题栏显示刷新图标，转圈圈 wx.showNavigationBarLoading() // 请求最新数据 this.initDate(true); setTimeout(() => { // 标题栏隐藏刷新转圈圈图标 wx.hideNavigationBarLoading() }, 1000); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { setTimeout(() => { this.initDate(); }, 300); },
data 中
loading: false, // 是否正在加载中 loaded: false, // 是否加载完全部数据
/** * 初始化数据 */ initDate: function (isPage) { var that = this; // 加载第一页 if (isPage === true){ that.setData({ notice_list: [], page: 1 }); } else { var num = that.data.page + 1; if (num <= that.data.totalPage) { that.setData({ page: num }); } else if (num > that.data.totalPage) { that.setData({ loaded: true }); } } if (that.data.loading) return; if (that.data.loaded) return; var json = { keywords: that.data.keywords }; wx.showLoading({ title: \'加载中\', }) that.setData({ loading: true, loadTitle: \'\' }); noticeList(json).then(res => { let notice_list = app.SplitArray(res.data.notice_list.list, that.data.notice_list); wx.hideLoading() that.setData({ notice_list: notice_list, loading: false, loadTitle: that.data.page == res.data.notice_list.total_page ? \'已全部加载\' : \'加载更多\', totalPage: res.data.notice_list.total_page }); }).catch(err => { that.setData({ loading: false, loadTitle: \'加载更多\' }); });; },
页面中
<view class=\'annicate_wrap\'> <annicate bindtap=\'detailFun\' wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate> <view class=\'loadingicon acea-row row-center-wrapper\' wx:if=\'{{notice_list.length > 0}}\'> <text class=\'loading iconfont icon-jiazai\' hidden=\'{{loading==false}}\'></text>{{loadTitle}} </view> </view>
app.SplitArray是小程序连接两个数组的方法
app.js 中
/* * 合并数组 * @param array list 请求返回数据 * @param array sp 原始数组 * @return array */ SplitArray: function(list, sp) { return util.SplitArray(list, sp) }
untils 中
/* * 合并数组 */ const SplitArray = function (list, sp) { if (typeof list != \'object\') return []; if (sp === undefined) sp = []; for (var i = 0; i < list.length; i++) { sp.push(list[i]); } return sp; }
