WEPY框架下小程序分頁和上拉加載下拉刷新操做實踐

以較爲複雜的引入組件的狀況進行記錄。僅適用於安裝了wepy框架的小程序項目
一、在循環輸出以後添加『加載更多』視圖

<view class="weui-loadmore weui-loadmore_line" wx:if="{{ noMoreData }}">
          <view class="weui-loadmore__tips weui-loadmore__tips_in-line">沒有更多數據</view>
 </view>

二、在『組件』中聲明必要的數據源

data = {
    articles :[],// 要加載的數據集合
    noMoreData: false,
     // 是否在加載中
    isLoading: false ,
    page :1 // 頁數 給予默認值1

  }
  
      props = {
      // 父頁面傳入，請求參數
      syncData: {
        type: Object,
        default: {}
      },
      // 父頁面闖入，請求url
      syncUrl: {
        type: String,
        default: 'articles'
      }
    }

三、在page的data中聲明，跟組件中有重複，暫時還沒排除好，因此都寫上吧。。

articles :[],
  page : 1,
  requestData: {},
  requestUrl: null

四、在組件中聲明刷新和加載的函數，

// 加載更多
    async loadMore () {    console.log('加載更多')
      // 若是沒有更多數據， 或者正在加載，直接返回
      if (this.noMoreData || this.isLoading) {
        return
      }
      // 開始請求以前設置 isLoading 爲true
      this.isLoading = true
      this.page = this.page + 1
      await this.getArticles(this.page,false)

      // 開始結束後設置 isLoading 爲 false
      this.isLoading = false
      this.$apply()
    }
    // 從新加載
    async reload() {
      console.log('從新加載')
      this.noMoreData = false
      this.page = 1
      return await this.getArticles(this.page,true)
    }

五、在page中調用

async onPullDownRefresh() {     console.log('onPullDownRefresh')
      this.page = 1
      await this.$invoke("nav1", "reload")
      wepy.stopPullDownRefresh()
    }
  async onReachBottom () {
    console.log('onReachBottom')
      // 若是沒有更多內容，直接返回
   if (this.noMoreData) {
        return
      }
      this.page = this.page + 1
      await this.$invoke("nav1", "loadMore")
      this.$apply()
    }

六、最後請求了

/*獲取文章列表*/
    async getArticles(page = 1,reset = false){
       let response
      try{
        response = await api.request({
      url: "articles",
      data:{
      page :page ,
      weid : 7
      }
    })
    let article = response.data.data ;
    console.log(response)
   // console.log(article)
   // console.log(reset)
     // 若是傳入參數 reset 爲true，則覆蓋 topics
       this.articles = reset ? article : this.articles.concat(article)
        // this.articles = reset ?this.articles : this.articles.concat(this.articles)

        // console.log(this.articles);
        let current_page = response.data.current_page
        let total = response.data.total
        console.log("current_page="+current_page+",total="+ total)
      // 根據分頁設置是否還有更多數據
        if (current_page ===  total) {
          console.log("無更多")
          this.noMoreData = true
        }
      }catch(err){
      console.log(err);
      }
      this.$apply()
      return response
    }