其实这两个功能没有多复杂，很多初学者以为是很高大上的功能，不知道怎么做。说白了就是把分页改成ajax形式的了。本人也属新手，欢迎大家在评论区一起留言讨论:bowtie:。

配置

下拉刷新配置

根据项目需求选择是进行全局配置还是单页面配置。全局配置在app.json的window中，页面配置在对应pages的.json中。

  1. {
  2.   "enablePullDownRefresh": true, // 是否开启下拉刷新
  3.   "backgroundTextStyle":"dark"   // 下拉 loading 的样式，仅支持dark/light
  4. }
  5. // 自定义下拉刷新样式可以使用 scroll-view 进行布局。

关闭下拉刷新动画方法

  1. wx.stopPullDownRefresh()

上拉加载配置

上拉加载只用配置触底距离就可以了，当然不配置也可以，默认就是到最低部触发。

  1. "onReachBottomDistance": 150  // 页面触底距离 单位为px

事件

mpvue中兼容了小程序的生命周期,可直接使用。

下拉刷新事件

  1. onPullDownRefresh () {
  2.     console.log('下拉刷新')
  3. }

上拉触底事件

  1. onReachBottom () {
  2.     console.log('触底了')
  3. }

代码举例

话不多说，直接上代码，相信有点前端基础的都能看得懂。

  1. <script>
  2. export default {
  3.   data () {
  4.     return {
  5.       app_list: {}, // 列表数据
  6.       page: 1,      // 当前页数
  7.       total_page: 0 // 总页数
  8.     }
  9.   },
  10.   // 实例创建完成后调用数据
  11.   created () {
  12.     this.getList()
  13.   },
  14.   // 上拉触底事件
  15.   onReachBottom () {
  16.     if (this.page > this.total_page) {
  17.       console.log('数据加载完了')
  18.     } else {
  19.       // 下一页
  20.       this.page = this.page + 1
  21.       this.getList()
  22.     }
  23.   },
  24.   // 下拉刷新事件
  25.   onPullDownRefresh () {
  26.     // 初始化页码
  27.     this.page = 1
  28.     this.getList()
  29.   },
  30.   methods: {
  31.     // 获取数据方法
  32.     getList () {
  33.       const that = this
  34.       wx.request({
  35.         method: 'post',
  36.         url: 'https://www.xxx.com/list',
  37.         data: {
  38.           page: that.page // 传递页码
  39.         },
  40.         header: {
  41.           'content-type': 'application/json'
  42.         },
  43.         success (res) {
  44.           // 关闭下拉刷新动画
  45.           wx.stopPullDownRefresh()
  46.           // 返回的数据
  47.           const data = res.data
  48.           // 数据追加  data.list为返回的数据列表
  49.           if (that.page > 1) {
  50.             // 数据追加
  51.             that.app_list.push(...data.list)
  52.             // ...data.list
  53.             // 等同于
  54.             // for (var i = 0; i < data.list.length; i++) {
  55.             //     this.art_list.push(data['list'][i])
  56.             // }
  57.           } else {
  58.             // 数据
  59.             that.app_list = data.list
  60.           }
  61.           // 总页数
  62.           that.total_page = data.total_page
  63.         }
  64.       })
  65.     }
  66.   }
  67. }
  68. </script>
小程序demo体验

代码汇小程序demo体验