微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）

最新推荐文章于 2026-04-07 10:23:23 发布

原创最新推荐文章于 2026-04-07 10:23:23 发布 · 374 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#微信小程序

简介
小程序某项目中有个需求：用户进入聊天页，自动到最底部，发送（接收）新消息也到最底部。
由于本身是小程序，且有支持的方法了，所以没有采用计算内容的高度，通过设置 scroll-top 的值，达到效果的方法（代码冗余没必要）。
小程序API中有scroll-view标签组件，该组件有个方法：scroll-into-view（值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素），即可快速实现需求效果。

具体实现
1、设置哪个方向可滚动，则在哪个方向滚动到该元素（即滚动到指定元素底部的位置）。所以设置Y轴滚动，并且遍历数据的时候给每条数据添加一个id，设置scroll-into-view的值为最后一条数据的id就可以。如下图：

2、至于这个id（循环的标签处，此处即view）可以利用好索引，它最后一条数据的id就是所有数据的length-1了。如下图：

3、页面进入时滚动到底部，给在data中定义的变量赋值，循环数组的最后一个下标值（注意：scroll-into-view的值应为子元素id【id不能以数字开头】）。currentMessageList为存储会话列表数据的数组。

4、接收消息的滚动到底部时，亦是如此。新的数据返回处理后，重新赋值给currentMessageList，然后重复第三步的红色框的代码。

this.setData({
toView: `item${this.data.currentMessageList.length - 1}`
});
一键获取完整项目代码
javascript
1
2
3
5、注意：<scroll-view>必须设置固定高度，自动滚动才会生效。

补充
如果以上方法使用了没有自动到底部的效果，那就换一种方式【主要是scrollView的滚动，涉及到的细节问题多一些，以防大家不知道没效果的原因】，直接使用view标签，通过JS方法控制滚动到底部，如下。
第一步： wxml中，使用一个大的view标签包住消息列表代码，设置一个id，自己取名（使用ID是以防后续其他的标签命名有重复）。

第二步：在js文件中，data里设置一个 scrollTop: 0 的初始变量。

dataa() {
scrollTop: 0 // 内容底部与顶部的距离
}
一键获取完整项目代码
1
2
3
第三步：写一个js方法，如下(注意id名要一致)

toViewBottomFun: function() {
// 设置屏幕自动滚动到最后一条消息处
let that = this;
wx.createSelectorQuery().select('#viewCommunicationBody').boundingClientRect(function(rect) {
wx.pageScrollTo({
scrollTop: rect.height,
duration: 100 // 滑动速度
})
that.setData({
scrollTop: rect.height - that.data.scrollTop
});
}).exec();
}
一键获取完整项目代码
javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
第四步：在数据处理且赋值完成后，要实现自动滚动到底部效果时，直接调用该方法即可。

最后
觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！
————————————————
版权声明：本文为CSDN博主「前端-如此如此。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44136505/article/details/103861926