微信小程序分页，底部下拉事件，小程序数组拼接

最新推荐文章于 2025-03-28 10:01:00 发布

原创最新推荐文章于 2025-03-28 10:01:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序分页 #数组拼接 #底部下拉事件 #onReachBottom不触发 #concat

知识累计同时被 2 个专栏收录

13 篇文章

订阅专栏

避坑宝典

4 篇文章

订阅专栏

本文详细介绍了在小程序中如何通过onReachBottom事件实现数据的分页加载，展示了具体的代码示例，包括如何合并数组以更新数据，并探讨了事件不触发的常见原因及其解决方案。

不废话直接开始；

1,准备好两页的数据，假设是两个数组

data: {
	let arr1 = [1,1,1,1,1,1,2];
	let arr2 = [0,0,0,0,0,0,6];
}

2,接着添加底部上拉事件；onReachBottom

  ![onReachBottom: function () {
    let arr2 = this.data.arr2;
    let arr1 = this.data.arr1;
    console.dir(arr1);
    let res = arr1.concat(arr2);
    this.setData({
      arr1:res
    })
    console.log(arr1);
  },](https://img-blog.csdnimg.cn/20191127103216386.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pheUxvZw==,size_16,color_FFFFFF,t_70)

3,接着我们刷新页面，触发底部上拉事件;

看到每次触发事件，数组长度都增加了7个，且追加的内容就是arr2的内容；输出结果

然后是题外话，onReachBottom不触发。有时候你写了底部上拉触发事件，且没有错，但是底部上拉之后，事件没有触发。一头雾水找不到问题；
问题可能有几个
1,onReachBottom 事件是小程序页面自带的，自己在定义一个的话；后一个会覆盖前一个；检查下后面的自带函数里面是不是有了onReachBottom；
2, 高度不够滚动条不显示.
3, 高度值不合法，page元素高度设置为100%。如果父元素没有固定高度，子元素不能设置height:100%;