微信小程序：scroll-view自动滚动到最底部，附view标签滚动到底部方法_scroll-view 发送成功消息后滚动到最后一条消息

简介

小程序某项目中有个需求：用户进入聊天页，自动到最底部，发送（接收）新消息也到最底部。
由于本身是小程序，且有支持的方法了，所以没有采用计算内容的高度，通过设置 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}`
 });
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();
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

第四步：在数据处理且赋值完成后，要实现自动滚动到底部效果时，直接调用该方法即可。

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！