微信小程序之页面事件_微信小程序 页面事件

一.下拉刷新事件

1.什么是下拉刷新

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

2.如何启用下拉刷新

        启用下拉刷新的方式有两种：

①在app.json全局配置文件中，将enablePulldownRefresh设置为true，即可为所有页面开启下拉刷新功能。

②在局部页面.json配置文件中，将enablePulldownRefresh设置为true，即可为对应页面开启下拉刷新功能。

因为并不是所有页面都需要下拉刷新，固推荐使用第二种方式来开启

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

        在全局或页面的.json配置文件当中，通过修改backgroundColor和backgroundTextStyle来分别设置下拉窗口的背景颜色和loading样式。

其中，backgroundColor仅支持16进制颜色值，而backgroundTextStyle仅支持dark和light两种属性

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

        在全局或页面对应的.js文件中已经内置了onPullDownRefresh方法来监听刷新，我们只需在其中定义自身需要的方法即可。

如在每次刷新页面时在控制台输出“调用了下拉刷新方法”：

onPullDownRefresh() {
  console.log('调用了下拉刷新方法'),
  wx.stopPullDownRefresh()
  },

5.停止下拉刷新的效果

        当处理完下拉刷新的请求以后，页面的loading效果不会自动消失，需要手动来结束刷新效果，此时调用wx.stopPullDownRefresh()方法即可自动停止。

例：设置一个按钮传参让count每次加，每次加完都会在页面上显示，同时设置刷新页面后count值归零（此例结合诸多之前内容，如有看不明白可往前自行查找）

<view>{{count}}</view>
<button type="primary" bindtap="btp4" data-info="{{2}}">count+2</button>
 
data: {
    count :0
  },
btp4(e){
    this.setData({
      count : this.data.count + e.target.dataset.info
    })
  },
onPullDownRefresh() {
  this.setData({
    count : 0
  }),
  wx.stopPullDownRefresh()
  },

二.上拉触底事件

1.什么是上拉触底事件

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

2.监听页面的上拉触底事件

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

3.配置上拉触底距离

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

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

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

上拉触底案例：

定义获取随机颜色的方法
在页面加载时获取初始数据

渲染UI结构并美化页面效果
在上拉触底时调用获取随机颜色的方法

添加loading提示效果
?（对上拉触底进行节流处理）

<!-- .wxml文件中 -->
<view wx:for="{{colorlist}}" wx:key="{{index}}" class="item" style="background-color: rgba({{item}});">{{item}}</view>
 
 
<!-- .wxss文件中 主要美化项目-->
.item{
 border: 1px solid #efefef;
 text-align: center;
border-radius: 8rpx;
line-height: 200rpx;
margin: 20rpx;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
 
 
<!-- .js文件中 -->
data: {
  colorlist :[]
  },
  getcolorlist(){
    wx.showLoading({
      title: '数据加载中',
    })
  wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method : "GET",
    success: (res) =>{
        this.setData({
          colorlist : res.data.data
        }) 
    } ,
    complete :() =>{
    wx.hideLoading()
    }
  })
  },
 onReachBottom :function(){
    this.getcolorlist()
  },
 
<!-- 也可在.json文件中自定义一个触底距离 -->