uniapp开发微信小程序下拉刷新和触底加载

• 背景。使用uniapp默认组件进行的开发。使用到的组件有uni-load-more和一些配置

• 先手触底刷新

  1. 用到的status有多种状态。通过切换状态达到触底 展示不同的内容
     
     

  2. 另外需要配置响应事件。onReachBottom。同时还要在page.json中配置参数onReachBottomDistance数字越小距离底部距离越小越容易触发刷新。
     
     

  3. 使用计算属性status计算状态。对于状态isLoadMore的值进行计算。其中isLoadMore是根据返回值的数组长度是否小于pageSize的大小来计算。若小于则表示没有更多数据。反之不做处理
     
     

• 另外说下拉刷新。这个就简单多了。

  1. 通过配置pages.json中页面的属性enablePullDownRefresh进行控制。开启后会触发事件onPullDownRefresh。还可以在必要时结束东湖，如查询结束后使用uni.stop.....
     
     

• 总结。

  1. 使用hbuilderx开发uniapp。别忘记在看完组件文档后使用前记得安装插件。不然没有效果。有好几次犯了这样的错误，为啥添加了却没效果。。。
  2. 下拉和触底是两个类似于pc端页面中分页和查询的功能。
  3. 分几步处理。下载插件、看说明、配置、调试。