• 背景。使用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. 分几步处理。下载插件、看说明、配置、调试。

更多推荐