都知道直播组件live-player是不支持view这些普通元素的,所以弹幕内容都需要放在cover-view中,下面弹幕列表,自动滚动到底部的代码
<cover-view class="message-items" id="message-items" scroll-top="{{scrollTop}}px">
<cover-view class="message-item" wx:for="{{msgList}}">
<cover-view class="message-item-line">
<cover-view class="message-nick">{{item.nick}}</cover-view>
<cover-view class="message-info">{{item.message}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
{{scrollTop}} 这个参数就是js中data里设置的一个参数,下面是js代码
/**
* 弹幕滚动到底部
*/
messageScroll:function(){
var _this = this;
wx.createSelectorQuery().select('.message-item').boundingClientRect(function (rect) {
//这里的逻辑就是,把每条弹幕的高度x弹幕的条数,再加上每条弹幕直接的距离,margin值,这个10根据自己的样式调整
var toTop = (_this.data.msgList.length*rect.height+(rect.height*10));
_this.setData({scrollTop:toTop});
}).exec();
下面就是效果图:
如果有更好的方法或有优化的地方,欢迎留言讨论!
大佬,这个这么获取滚动区域的滚动值啊,或者怎么监听用户介入滚动事件?
多行文本的消息高度无法确定,可以试试将每条消息设个id:msg-index,利用scroll-into-view来滚动到最新的消息;另外我有一个问题:当用户滑动scroll-view查看之前的评论,此时不能自动滚到新消息,需要显示“n条新消息”,怎么判断此时机?
键盘弹出时 调用这个方法键盘就收回了,这该咋解决
这个在ios系统下会出现滚动区域不见的情况,这怎么解决哟!安卓正常
这个能看详细的滚动嘛 ,我现在也是 要做弹幕的的滚动