Mini Program Page Events

1. Pull down refresh event

---

1. What is pull-to-refresh

• 下拉刷新It is a proper term for the mobile terminal, which refers to the behavior of sliding down and sliding the finger on the screen 重新加载页面数据.

2. Enable pull-to-refresh

3. Configure the style of the pull-down refresh window

4. Listen to the pull-down refresh event of the page

• In the .js file of the page, onPullDownRefresh()the pull-down refresh event of the current page can be monitored through the function.
• For example, there is the following UI structure in the wxml of the page, click the button to increase the count value by +1:
  
• When the pull-down refresh event of the page is triggered, if you want to reset the value of count to 0, the sample code is as follows:
  

5. Stop the pull-to-refresh effect

• After the pull-down refresh is processed, the loading effect of the pull-down refresh will always be displayed, 不会主动消失so you need to manually hide the loading effect of the pull-down refresh. At this point, calling wx.stopPullDownRefresh()can stop the pull-down refresh of the current page. The sample code is as follows:
  

2. Pull-up bottoming event

---

1. What is pull-up bottoming

• 上拉触底It is a proper term for the mobile terminal, and the behavior is achieved by pulling up and sliding the finger on the screen 加载更多数据.

2. Listen to the pull-up bottoming event of the page

• In the .js file of the page, onReachBottom()the pull-up bottoming event of the current page can be monitored through the function. The sample code is as follows:
  

3. Configure the bottoming distance of the pull-up

3. Case of bottoming out

---

1. Case effect display

2. Implementation steps of the case

1. Define a method to get a random color
2. Get initial data on page load
3. Render the UI structure and beautify the page effect
4. 在上拉触底时调用获取随机颜色的方法
5. 添加oading 提示效果
6. 对上拉触底进行节流处理

1. Define a method to get a random color
   

2. Get initial data on page load
   

3. Render the UI structure and beautify the page effect

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

5. 添加oading 提示效果
   

6. 对上拉触底进行节流处理
   

3. Complete code

• contact.js

Page({
    
    
  // 页面的初始数据
  data: {
    
    
    colorList: [],
    isloding: false
  },
  getColors() {
    
    
    this.setData({
    
    
      isloding: true
    })
    // 需要展示 loading 效果
    wx.showLoading({
    
    
      title: '数据加载中...'
    })
    wx.request({
    
    
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({
     
      data: res }) => {
    
    
        this.setData({
    
    
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
    
    
        wx.hideLoading()
        this.setData({
    
    
          isloding: false
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.getColors()
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
    
    
    if (this.data.isloding) return

    this.getColors()
  },
})

• contact.wxml

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

• 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;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
  color: black;
}