WEPY框架下小程序分页和上拉加载下拉刷新操作实践

以较为复杂的引入组件的情况进行记录。仅适用于安装了wepy框架的小程序项目
1、在循环输出之后添加『加载更多』视图

<view class="weui-loadmore weui-loadmore_line" wx:if="{{ noMoreData }}">
          <view class="weui-loadmore__tips weui-loadmore__tips_in-line">没有更多数据</view>
 </view>

2、在『组件』中声明必要的数据源

  data = {
    articles :[],// 要加载的数据集合
    noMoreData: false,
     // 是否在加载中
    isLoading: false ,
    page :1 // 页数 给予默认值1

  }
  
      props = {
      // 父页面传入，请求参数
      syncData: {
        type: Object,
        default: {}
      },
      // 父页面闯入，请求url
      syncUrl: {
        type: String,
        default: 'articles'
      }
    }

3、在page的data中声明，跟组件中有重复，暂时还没排除好，所以都写上吧。。

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

4、在组件中声明刷新和加载的函数，

    // 加载更多
    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)
    }

5、在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()
    }

6、最后请求了

    /*获取文章列表*/
    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
    }