Pull-up refresh in applet (pull-up hit bottom)

“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

What is a pull-up refresh?

A pull-up refresh is the act of loading more data by swiping up and down the screen with your finger, such as paging

---

Listen for a pull-up refresh of the page

• The pull-up refresh requirement is that the current page must be higher than the height of the screen, so that the page can slide

• In the.js file of the page, the onReachBottom() function listens for the pull-up refresh event of the current page

  onReachBottom: function () {
      console.log("Pull up refresh")},Copy the code

  Note: In real development, paging requests for data require throttling, meaning that data will not be requested again until the last request has been completed

---

Configure the bottom distance for the pull-up refresh

• The bottom distance of the pull-up refresh is the distance from the scroll bar to the bottom of the page when the pull-up event is triggered
• Can be global or page.jsonIn the configuration file, passonReachBottomDistanceProperty to configure the bottom distance of the pull-up refresh (default bottom distance is 50px)

Json configuration file for the global page

"window": {"navigationBarBackgroundColor": "#fff"."navigationBarTitleText": "Weixin"."navigationBarTextStyle":"black"."enablePullDownRefresh": true."backgroundColor": "#2b4b6b"."backgroundTextStyle":"light"."onReachBottomDistance": 160
},
Copy the code

A.json configuration file for a local page

{
    "usingComponents": {},
    "onReachBottomDistance": 150
}
Copy the code

---

Pull-up refresh cases

• Defines a method for getting random colors

  data: {
      colorList:[]
  },
  
  getColors(){
      wx.request({
          url: 'https://www.escook.cn/api/color'.method:"GET".success: ({data:res}) = > {
              console.log(res)
              this.setData({
                  colorList:[...this.data.colorList, ...res.data]
              })
          }
      })
  },
  Copy the code

• Get the initial data when the page loads

  onLoad: function (options) {
      this.getColors()
  },
  Copy the code

• Render the UI structure and beautify the page

  Page structure:

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

  Page beautification:

  .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;
  }
  Copy the code

• The method that gets a random color is called when the pull-up hits the bottom

  onReachBottom: function () {
      this.getColors()
  },
  Copy the code

• Add loading prompt effect

  getColors(){
  
      // Display the loading effect
      wx.showLoading({
          title: 'Data loading... ',
      })
  
      wx.request({
          url: 'https://www.escook.cn/api/color'.method:"GET".success: ({data:res}) = > {
              console.log(res)
              this.setData({
                  colorList:[...this.data.colorList, ...res.data]
              })
          },
          
          complete: () = > {
          // Hide the loading effect
              wx.hideLoading({
                  success: (res) = >{},})}})},Copy the code

• Throttling control of the pull-up refresh

  • Define isloading throttle in data

    data: {
        colorList: [].isloading:false
    },
    Copy the code

  • Modify isloading throttle in the getColors method

    getColors(){
        this.setData({
            isloading:true
        })
        
        // Display the loading effect
        wx.showLoading({
            title: 'Data loading... ',
        })
        
        wx.request({
            url: 'https://www.escook.cn/api/color'.method:"GET".success: ({data:res}) = > {
                console.log(res)
                this.setData({
                    colorList:[...this.data.colorList, ...res.data]
                })
            },
        
            complete: () = > {
                // Hide the loading effect
                wx.hideLoading()
                this.setData({
                    isloading:false}}}})),Copy the code

  • Throttling control of data requests is performed by determining the throttle value in onReachBottom

    onReachBottom: function () {
        if (this.data.isloading) return
        this.getColors()
    },
    Copy the code