一、下拉刷新

1.json文件

说明：开启下拉刷新，然后设置窗口的背景色，方便观看。

  "enablePullDownRefresh": true,"backgroundColor":"#FFC0CB"

 

2. js文件

说明：重新发起请求，并显示加载中

   * 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.getData()wx.showLoading({title: '加载中',})},

 

 3.js文件

说明：当数据请求成功后，收回下拉刷新框并关闭加载中。

      success: ({data}) => {// 数据加载成功,关闭下拉刷新wx.stopPullDownRefresh()// 成功后并关闭加载中wx.hideLoading()this.setData({arrList:data.data})},

二、触底事件刷新

2.json文件

说明：onReachBottomDistance定义了从页面底部的距离为50px，当滚动距离接近到这个值时，通常会触发一个函数或事件来加载更多内容。

  "onReachBottomDistance": 50

 说明：当距离页面底部为50px的时候，重新发起数据请求，并添加一个显示导航条加载动画(转态遮罩)

   * 页面上拉触底事件的处理函数*/onReachBottom() {this.getData()//  在当前页面显示导航条加载动画,是一个状态遮罩wx.showNavigationBarLoading()},

 说明：改造了getData()函数，将以前的数据和现在获取的数据进行相加。以此下拉获取更多的信息。

  getData() {wx.request({url: '**',method:"GET",success: ({data:res}) => {// 数据加载成功,关闭下拉刷新wx.stopPullDownRefresh()// 成功后并关闭加载中wx.hideLoading()wx.hideNavigationBarLoading()let oldData=this.data.arrListlet newData=oldData.concat(res.data)this.setData({arrList:newData})}})},

三、源码

3.1 xml文件

<!-- 简单的前台页面 -->
<view>
<block wx:for="{{arrList}}" wx:key="id">
<view>猫儿</view>
<image src="{{item.url}}" mode=""/>
</block>
</view>

3.2 js文件

// pages/refresh/refresh.js
Page({/*** 页面的初始数据*/data: {arrList:[]},getData() {wx.request({url: '**',method:"GET",success: ({data:res}) => {// 数据加载成功,关闭下拉刷新wx.stopPullDownRefresh()// 成功后并关闭加载中wx.hideLoading()//关闭导航加载wx.hideNavigationBarLoading()let oldData=this.data.arrListlet newData=oldData.concat(res.data)this.setData({arrList:newData})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData()wx.showLoading({title: '加载中',})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.getData()//清空数据，重新获取数据(归零)this.setData({arrList:[]})},/*** 页面上拉触底事件的处理函数*/onReachBottom() {this.getData()//  在当前页面显示导航条加载动画,是一个状态遮罩wx.showNavigationBarLoading()},/*** 用户点击右上角分享*/onShareAppMessage() {}
})