【微信小程序】-—下拉刷新、上拉触底事件详细讲解_编写页面事件处理函数下拉刷新事件、上拉触底事件、分享事件。

1.页面事件–下拉刷新事件

1.1什么是下拉刷新

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

2.启动下拉刷新

（1）方法一：全局开启下拉刷新

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

{
    "pages": [
        "pages/switch/switch",
        "pages/navigator/navigator",
        "pages/test/test",
        "pages/tabBar/tabBar",
        "pages/index/index"
    ],
    "window": {
        "enablePullDownRefresh": true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

（2）方法二：局部开启下拉刷新
在页面的.json配置文件中，将enablePullDownRefresh设置为true

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}
1
2
3
4

在实际开发中，推荐使用第二种方式，为需要的页面单独开启下拉刷新效果。

3.配置下拉刷新窗口的样式

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

backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值

backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light

{
    "pages": [
        "pages/switch/switch",
        "pages/navigator/navigator",
        "pages/test/test",
        "pages/tabBar/tabBar",
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "dark",
        "backgroundColor":"#bfa",
        "enablePullDownRefresh": true
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.监听页面的下拉刷新事件

在页面的.js文件中，通过onPullDownRefresh()函数可以监听当前页面的下拉刷新是事件。（下拉刷新页面的时候触发该函数的调用）

例如：在页面的wxml中有如下的ui结构，点击按钮可以让count值自增+1，刷新页面将count重置为0

在.wxml中

<view >{{count}}</view>
<button bindtap="handler">点我+1</button>
1
2

在.js中

 data: {
    count:0
  },
  handler(){
    this.setData({
      count:this.data.count+1
    })
  },
onPullDownRefresh() {
    //console.log("111");//当页面刷新会被触发
    this.setData({
      count:0
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动停止loading的效果。此时，调用wx.stopPullRefresh()可以停止当前页面的下拉刷新。
在.wxml中

<view >{{count}}</view>
<button bindtap="handler">点我+1</button>
1
2

在.js中

 data: {
    count:0
  },
  handler(){
    this.setData({
      count:this.data.count+1
    })
  },
onPullDownRefresh() {
    this.setData({
      count:0
    }),
    wx.stopPullDownRefresh();
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.页面事件–上拉触底事件

2.1什么是上拉触底

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

2.2监听页面的上拉触底事件

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

在.js中

onReachBottom() {
   console.log('触发了上拉触底事件');
  },
1
2
3

当wxml的数据够多的时候，当向上滑动触到底的时候，就会触发该方法

2.3配置上拉触底距离

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

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

小程序默认的触底距离是50px,在实际开发中，可以根据自己的需求修改这个默认值。

{
  "onReachBottomDistance": 10
}
1
2
3

2.3配置上拉触底案例

2.3.1

定义获取随机颜色的方法

在页面加载时获取初始值

渲染ui结构并美化页面效果

在上拉触底时调用获取随机颜色的方法

添加loading提示效果

对上拉触底进行节流处理