实现要点:
- onReachBottom声明周期
- 使用随机数触发子组件的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)
})
},
到这里就实现了每次下拉到底部都会执行函数了。