uniapp小程序 集下拉加载更多，上拉刷新的组件

z-paging  

网址  介绍 | z-paging文档

一个uni-app (opens new window)分页组件。
全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。

使用感受真的非常好，只需要两步，轻松解决触底加载，上拉刷新，再也不需要手动写分页了。解放双手。

1.<template>
  <view class="flex-col justify-start page">
      <z-paging ref="paging"
        height="99vh" 
       :auto-clean-list-when-reload="false" 
       :auto-scroll-to-top-when-reload="false" 
       v-model="List"
        @query="queryList"
        >
    </z-paging>
  </view>
</template>

2.    methods: {
        queryList(pageNo,pageSize) {
           this.$myRequest(
           {
               url:'/store/store/income_expenditure_details',
               data:{
                    page:pageNo,
                    pageSize:pageSize
               },
               methods:'GET'
           }
                  ).then(res => {
             this.$refs.paging.complete(res.data.data.list)
                     // this.$refs.paging.reload()
           }).catch(res => {
             console.log("请求出错", res)
           })
         },
    },

触底组件会自动计算第几页，并渲染好数据，简直是懒人必备。

同时也可以检测滚动距离等

更多细节可查看官方文档。

重点说明：

v-mode绑定的数据，需要和循环处的数据一致，页面加载时，会自动请求数据，不需要在生命周期里面调用。

#