博客

一、启用下拉刷新（两种方式）

1、全局下拉刷新

在app.json的window节点中，将enablePullDownRefresh设置为

true


2、局部下拉刷新

在页面的json文件中，将enablePullDownRefresh设置为

true


二、配置下拉刷新

在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：

backgroundColor：用来配置下拉刷新

窗口的背景颜色

，仅支持16进制的颜色值

backgroundTextStyle：用来配置下拉刷新

loading的样式

，仅支持

dark和light

两个颜色属性

如图在页面的json文件进行的配置：




三、下拉刷新


1、在data中定义存放列表的属性，用来接收获取的数据

data: {
    goodsList:[], // 商品列表数组
    // 请求参数对象
    queryObj:{
      pagenum: 1,// 页码值
      pagesize: 10 // 每页显示多少条数据
    },
    // 总数量，用来实现分页
    total: 0
  },

2、将页面跳转时携带的参数，转存到 queryObj 对象中：

  /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
// 调用获取商品列表数据的方法
 	this.getGoodsList()
 },

3、 定义获取商品列表数据

//获取商品列表数据方法
getGoodsList(isPull) {
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://www.dd.cn/${this.data.queryObj}`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        // 只要数据请求完毕，就立即按需调用 isPull回调函数
  		isPull && isPull()
        this.setData({
          goodsList:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
      }
    })
  },

3、在页面循环数据，展示到页面（此处代码省略）

4、

下拉刷新事件

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 1. 重置关键数据
    let pagenum = 'queryObj.pagenum'
    this.setData({
      [pagenum]:1,
      total :0,
      isloading : false,
      goodsList : []
    })

    // 2. 重新发起请求 并关闭下拉窗口
    this.getGoodsList(() => wx.stopPullDownRefresh())
  },

四、上拉触底事件


1、首先需要配置json文件，

“onReachBottomDistance”: 150


2、在onReachBottom上拉触底事件中处理

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  	if(this.data.isLoading) return  //判断是否为true 
  	
  	let pagenum = 'queryObj.pagenum'
    this.setData({
      pagenum:pagenum += 1// 让页码值自增 +1
    })
    this.getGoodsList()// 重新获取列表数据
  },

3、通过节流阀防止发起额外的请求

3.1在 data 中添加 isloading 节流阀如下：

  data: {
// 是否正在请求数据
    isloading: false
}

3.2修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

// ** 打开节流阀
getGoodsList() {
  this.setData({
      isLoading:true
    })
   // 省略中间代码，和前面一致
  wx.request({
   //...省略代码，和前面 3、定义获取商品列表数据 代码不变
  	// 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
  })
}

3.3

判断数据是否加载完毕

，避免不必要的请求

如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

 onReachBottom: function () {
// 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕！',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  }

上拉触底完整代码如下

data: {
    goodsList:[], // 商品列表数组
    // 请求参数对象
    queryObj:{
      query: '',   // 查询关键词
      cid: '',   // 商品分类Id
      pagenum: 1,// 页码值
      pagesize: 10 // 每页显示多少条数据
    },
    // 总数量，用来实现分页
    total: 0,
    // 是否正在请求数据
    isloading: false
},
//获取商品列表数据方法
getGoodsList() {
	this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://www.dd.cn/${this.data.queryObj}`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        this.setData({
          goodsList:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
    })
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕！',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  	if(this.data.isLoading) return 
  	
  	let pagenum = 'queryObj.pagenum'
    this.setData({
      [pagenum]:pagenum += 1// 让页码值自增 +1
    })
    this.getGoodsList()// 重新获取列表数据
  },