小程序--下拉刷新/上拉触底

本文详细介绍了移动端下拉刷新和上拉触底的实现方法,包括如何全局和局部开启、配置样式、监听事件及停止刷新,同时涵盖了上拉触底事件的监听和距离设置。通过实例演示了如何在WXML和JS中操作计数器响应这两种操作。
摘要由CSDN通过智能技术生成
一、什么是下拉刷新
下拉刷新是移动端的专有名词,是指通过手指在屏幕上的下拉滑动操作,从而 重新加载页面数据的行为
二、如何开启下拉刷新
①全局开启下拉刷新
在app.json的windows节点中,将enablePullDownRefresh设置为true
②局部开启下拉刷新
在页面的.json配置文件中,将enablePullDownRefresh设置为true
【注】:推荐局部下拉刷新,因为在实际开发当中,不是所有的页面都需要下拉刷新的功能
三、配置下拉刷新的样式
在.json配置文件中,将 backgroundColorbackgroundTextStyle来配置下拉刷新窗口的样式
  • backgroundColor用来配置下拉刷新 窗口的背景颜色,仅支持16进制的颜色值
  • backgroundTextStyle用来配置下拉刷新 loading的样式,仅支持 darklight
四、监听页面下拉刷新事件
在.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属性来配置上拉触底的距离
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值