小程序中应该如何实现上拉加载？

实现要点:

1. onReachBottom声明周期
2. 使用随机数触发子组件的oberserver

第一步: 在Page页面中维护一个参数，的onreacebottom中。改变该参数。

data: {
    more: false
  },

onReachBottom: function () {
    this.setData({
      more: true
    })
  },

第二步：向子组件传递

<v-search more="{{more}}"/>

第三步：子组件接收properties（因为组件没有onReachBottom的生命周期钩子），并在more发生改变的时候，通过observer触发函数

more: {
   type: String,
   observer: '_load_more'
},

触发的函数测试:

methods: {
	_load_more() {
      console.log(112)
    },
    onCancel(event) {
      this.triggerEvent('unsearching', {}, {})
    },
}

这时候发现，页面拉到底部的时候，只会触发一次，第二次不会触发，这是因为observer只会在more这个参数发生改变的时候，才会执行。所以这里的more不能使用boolean类型的值，而应该使用随机数来解决这个问题

第四步：生成随机数

在until里面封装一个生成随机数的函数：

const chars = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

const random = function getRandom(n) {
  var res = '', i;
  for(i = 0; i < n; i++) {
    var id = Math.ceil(Math.random() * 35);
    res += chars[id]
  }
  return res
}

export {
  random
}

第五步: 在page页使用随机函数

引入：

import {Random} from '../../util/common.js'

改写Page页面的more

 data: {
    more: ''
  },

onReachBottom: function () {
    this.setData({
      more: Random(8)
    })
  },

到这里就实现了每次下拉到底部都会执行函数了。