小程序-视图与逻辑之二：页面事件

一、下拉刷新

1、什么是下拉刷新事件

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

2、启用下拉刷新

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

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

message.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
<span style="color: rgb(255, 0, 0);" data-mce-style="color: #ff0000;">  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"</span>
}

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

5、停止下拉刷新动作

二、上拉触底事件

1、什么是上拉触底

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

2、监听页面的卡拉触底事件

3、配置上拉触底距离

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

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

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

4、上拉触底案例

4.1案例展示

4.2案例的实现步骤

1. 定义获取随机颜色的方法
2. 在页面加载时获取初始数据
3. 渲染UI结构并美化页面效果
4. 在上拉触底时调用获取随机颜色的方法
5. 添加loading提示效果
6. 对上拉触底进行节流处理

4.3步骤1-定义获取随机颜色的方法

4.3步骤2-在页面加载时获取初始数据

4.3步骤3-渲染UI结构并美化页面效果

/* pages/contact/contact.wxss */

/* pages/contact/contact.wxss */
.num-item{
  /*给每项添加边框线 及 颜色*/
  border:1rpx solid #efefef;
  /*方框圆角样式*/
  border-radius: 8rpx;
  /*每项行高*/
  line-height: 200rpx;
  /*每项间的距离*/
  margin: 15rpx;
  /*文本居中*/
  text-align: center;
  /*给文本添加阴影效果:横向偏移  纵向偏移  阴影扩散 阴影颜色*/
  text-shadow: 0rpx 0rpx 5rpx #fff;
  /*给边框盒子添加阴影效果:横向偏移  纵向偏移  阴影扩散 阴影颜色*/
  text-shadow: 1rpx 1rpx 6rpx #aaa;
}

4.3步骤4-上拉触底时获取随机颜色

4.3步骤5-添加loading提示效果

4.3步骤6-对上拉触底进行节流处理

1. 1. 在data中定义isLoading节流阀
      • false表示当前没有进行任何数据请求
      • true表示当前正在进行数据请求
   2. 在getColore()方法中修改isLoading节流阀的值
      • 在刚调用getColors时将节流阀设置为ture
      • 在网络请求的complete回调函数中，将节流阀重置为false
   3. 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
      • 如果节流阀的值为true，则阻止当前请求
      • 如果节流阀的值为false，则发起当前请求

// pages/contact/contact.js

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList:[],
    isLoading:false
  },
getColors(){
  this.setData({
    isLoading:true
  })
  //需要展示loading效果
wx.showLoading({
  title: '数据加载中...',
})
wx.request({
  url: 'https://www.escook.cn/api/color',
  method:'GET',
  success:({date:res}) =>{
    this.setData({
    // ...展开数组，并添加新的数据进入，再把新值赋给数组
    colorList:[...this.data.colorList,...res.data] 
    })
  },
  complete:() => {
    //隐藏加载效果
    wx.hideLoading({
      success: (res) => {},
    })
    this.setData({
      isLoading:false
    })
  }
})
},


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },



  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    //如果isLoading为ture，则进行数据节流
    if(this.isLoading) return 
    this.getColors()
  },