小程序--下拉刷新/上拉触底-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序--下拉刷新/上拉触底。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、什么是下拉刷新

下拉刷新是移动端的专有名词，是指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

二、如何开启下拉刷新

①全局开启下拉刷新

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

②局部开启下拉刷新

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

【注】：推荐局部下拉刷新，因为在实际开发当中，不是所有的页面都需要下拉刷新的功能

三、配置下拉刷新的样式

在.json配置文件中，将 backgroundColor和 backgroundTextStyle来配置下拉刷新窗口的样式

backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
backgroundTextStyle用来配置下拉刷新 loading的样式，仅支持 dark和 light

四、监听页面下拉刷新事件

在.json配置文件中，通过 onPullDownRefresh()函数，监听当前页面的刷新事件

小练习

count初始值为0，点击按钮后，count值+1，下拉刷新后，count恢复成初始值0

【------home.wxml中------】

<view>Count的初始值是：{{count}}</view>                        //页面中显示Count初始值
<button bindtap="addConut">Count+1</button>          //页面中Count+1按钮

【------home.js中------】

data: {
    count:0                                                                     //初始值为0
  },
  addConut(){
    this.setData({                                                           //Count=初始Count+1
      count:this.data.count+1
    })
  },

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      count:0                                                                 //下拉Count值，恢复成初始值0
    })

  },

五、停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的 loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果，这个时，我们就需要用到 wx.stopPullDownRefresh()，停止当前页面的下拉刷新

小练习

count初始值为0，点击按钮后，count值+1，下拉刷新后，count恢复成初始值0

【------home.wxml中------】

<view>Count的初始值是：{{count}}</view>                        //页面中显示Count初始值
<button bindtap="addConut">Count+1</button>          //页面中Count+1按钮

【------home.js中------】

data: {
    count:0                                                                     //初始值为0
  },
  addConut(){
    this.setData({                                                           //Count=初始Count+1
      count:this.data.count+1
    })
  },

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      count:0
    })
    //当数据重置成功之后，调用此函数，关闭下拉刷新效果
    wx.stopPullDownRefresh()                                                   //下拉刷新后，loading效果消失
  },

六、上拉触底事件

【什么是上拉触底】

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

【监听页面的上拉触底事件】

在页面.js文件中，通过 onReachBottom()函数即可监听当前页面的上拉触底事件

【配置上拉触底距离】

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离

注：（默认距离是50px,滚动条距离页面不足50px时，触发事件）

可以在.json配置文件中，通过 onReachBottomDistance属性来配置上拉触底的距离

文章来源地址https://www.toymoban.com/news/detail-630885.html

到了这里，关于小程序--下拉刷新/上拉触底的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！