微信小程序 - 页面事件

上拉触底事件

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

	/*
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
	console.log('触发了页面上拉触底事件')
  }

下拉刷新事件

在页面的.js文件中，通过 onPullDownRefresh() 函数 即可监听当前页面的下拉刷新事件。例如，在页面的wxml中有如下的UI结构，点击按钮可以让 count 值自增 +1 :

<view>Count 值为：{{ count }}</view>
<button type="primary" bindtap="CountChange">+1</button>

  //+1按钮的点击事件处理函数
  CountChange(e){
    this.setData({
      count: this.data.count + 1
    })
  }

监听页面的下拉刷新事件

在触发页面的下拉刷新事件的时候，如果要把count的值重置为0，示例代码如下:

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

上拉触底案例

定义随机获取颜色的方法：

	/*
   * 页面的初始数据
   * colorList 存放随机获取的颜色值
   * isloading 是节流阀
   */
  data: {
    colorList: [],
    isloading: false
  },

getColors(){
    this.setData({
      isloading: true
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success: ({data: res}) => {
        this.setData({
          colorList: [...this.data.colorList,...res.data]
        })
      }      
    })

渲染 UI 结构并美化页面效果：

wxml：

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

wxss：

.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

添加 loading 提示效果：

	getColors{
    wx.showLoading({
      title: '数据加载中...', //需要展示loading效果
    })
    //发起请求，获取随机颜色值的数组
		wx.request({
		complete: () => {
		        wx.hideLoading()
		        //节流操作
		        this.setData({
		          isloading: false
		        })
		      }
		)}
	}

对上拉触底进行节流处理

① 在data中定义isloading节流阀

• false表示当前没有进行任何数据请求
• true表示当前正在进行数据请求

②在getColors()方法中修改 isloading 节流阀的值

• 在刚调用getColors时将节流阀设置true
• 在网络请求的complete回调函数中，将节流阀重置为false

③在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制

如果节流阀的值为true，则阻止当前请求
如果节流阀的值为false，则发起数据请求