• 技術文章
    微信小程序之上拉加載和下拉刷新
    發布日期:2019-06-24 閱讀次數:2386 字體大?。?a href="javascript:;" onclick="ChangeFontSize('content',16)">大

    使用系統提供的onPullDownRefresh、onReachBottom這2個事件,

    前提需要在app.json或page.json配置文件中設置,才能使用。

    app.json是全應用的頁面都可以使用該事件,page.json則只是對應的頁面才可以使用。


    屬性

    類型

    默認值

    描述

    enablePullDownRefresh

    Boolean

    false

    是否開啟下拉刷新。


    示例:

    app.json:

    在app.json文件里設置window屬性


    {
      "window":{
    "enablePullDownRefresh": true
      }
    }


     

    page.json:

    在page.json文件里直接設置屬性 

    {
        "enablePullDownRefresh": true
    }

     

    示例:
    可以結合導航欄loading顯示正在加載的效果

    Page({
      data: {
        pageNum: 1,       // 設置加載的第幾次,默認是第一次
        isFirstLoad: true,   // 用于判斷List數組是不是空數組,默認true,空的數組
        hasMore: false,    // “加載更多”
      },
      // 下拉刷新
      onPullDownRefresh: function () {
        // 顯示導航欄loading
        wx.showNavigationBarLoading();
        // 調用接口加載數據
        this.loadData();
        // 隱藏導航欄loading
        wx.hideNavigationBarLoading();
        // 當處理完數據刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新
        wx.stopPullDownRefresh();
      },
      // 上拉加載
      onReachBottom(e) {
        let that = this;
        if (that.data.hasMore) {
          that.setData({
            pageNum: that.data.pageNum + 1,  // 每次觸發上拉事件,把pageNum+1
            isFirstLoad: false                // 觸發到上拉事件,把isFirstLoad設為為false
          });

          that.loadData();
        }
      },
    }) 

    国产精品 高清 尿 小便 嘘嘘_无码8090精品久久一区_精品无码专区毛片_一本久道久久综合网