聊天界面如何实现始终保持滚动条在底部

[kiner-tang]

在实时聊天的时候，我们一般都希望最新的消息在我们可视区域的最底部，那么在小程序中如果需要实现这样的功能该怎么做呢？我运行了一下demo，貌似是没有实现此功能的。 上图最后一条消息后面还有一条最新消息被遮挡住了

[hfhimage]

同问

[Gcaufy]

https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

理论上应该可以通过计算 scroll-top 属性实现滚动到底部，但是我没有试验过。

[hfhimage]

嗯，关键是没找到计算的方法....我给 scroll-top 设置了一个比较大的值，勉强可以，但达不到小程序 “荔枝FM播客” 的效果，不知道他们怎么实现的

[Gcaufy]

发消息会计算消息列表高度，动态设计scroll-top

[Gcaufy]

这个属性应该也可以。

scroll-into-view	String		值应为某子元素id（id不能以数字开头），则滚动到该元素，元素顶部对齐滚动区域顶部，只支持纵向滚动

[renyufu]

从1.4.0开始，小程序提供了下面的api，可以获取到WXML的信息，包括节点高度： https://mp.weixin.qq.com/debug/wxadoc/dev/api/wxml-nodes-info.html#nodesreffieldsfieldscallback

[hfhimage]

这个厉害，我试试

[swit1983]

let query = wx.createSelectorQuery();
    query.select('#chatScrollView');
    query.selectAll('.chat-item').boundingClientRect(function (rects) {
        _this.setData({
          chatTop: _this.data.chatTop+rects.pop().height
        });
    }).exec();

[EasonShen1989]

怎么实现的啊？？

[LIZHIBIN513]

聊天页面第一次进入页面 好想获取不到高度？？只要点击进去一次 之后都可以自定滚动

[a958330481]

利用scroll-view的scroll-into-view属性

动态给每个消息设置一个id，然后让scroll-into-view指向最新的消息id即可。

demo如下：

scroll-into-view属性值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

<scroll-view scroll-y="true" scroll-into-view="msg{{msgs.length-1}}" scroll-with-animation="{{true}}">
    <view class="chat-msgs">
        <view class="msg-item" id="msg{{index}}" wx:for="{{msgs}}" wx:key="{{index}}">
            <view class="msg-item-con">
                {{item.content}}
            </view>
        </view>
    </view>
</scroll-view>