操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

下拉刷新

手指在屏幕上下拉滑動操作，實現頁面重新加載

1.啟動下拉刷新

全局配置 在app.json文件中的中開啟下拉刷新 h:true

局部配置 在頁面的.json文件中開啟下拉刷新 h:true

2.配置下拉刷新窗口樣式

:dark 下拉的效果

下拉的窗口效果

3.監聽下拉刷新事件

通過()監聽用戶下拉事件

/**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh() {
  },

4.停止下拉刷新動作

數據設置成功后，調用改函數，關閉下拉刷新動作

wx.()

上拉加載

手指在屏幕上上拉滑動動作，加載更多數據

1.在全局或者局部配置上拉觸底的動作

配置上拉觸底的距離 e : 60

2.監聽頁面上拉觸底事件

 /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom() {
     console.log("觸發了上拉觸底事件")
  },

上拉觸底案例

1.定義獲取隨機顏色的方法

2.在頁面加載時獲取初始化數據

3.渲染頁面解構頁面加載中的動態效果，美化頁面

4.上拉觸底時調用獲取隨機顏色的方法

5.添加提示效果

定義獲取隨機顏色的方法

 data:{
    colors:[]
 },
getColors() {
    wx.request({
      url: 'https://www.escook.cn/api/color', //隨機顏色地址
      method:'GET',
      success:(res)=>{
        this.setData({
        //將獲取到的隨機顏色的數據賦值給colors數組
          colors:res.data.data
        })
      },
    })

  },

在頁面加載時獲取初始化數據

/**
   * 生命周期函數--監聽頁面加載
   */
  onLoad(options) {
    this.getColors()
  },

渲染頁面解構頁面加載中的動態效果，美化頁面

{{item}}

上拉觸底時調用獲取隨機顏色的方法

/**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom() {
    this.getColors()

  },

上拉觸底時獲取的新數據和舊數據進行合并

getColors() {
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
       //this.data.colors 舊數據 res.data.data下拉觸底的新數據
          colors:[...this.data.colors,...res.data.data]
        })
      },
    })
  },

添加提示效果

getColors() {

    //開始加載
    wx.showLoading({
      title: '數據正在加載中',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:(res)=>{
        this.setData({
          colors:[...this.data.colors,...res.data.data]
        })
      },
      // 請求完成后 不管成功失敗 關閉loading加載
      complete:()=>{
        wx.hideLoading()
      }
    })
  },