cover-view小程序直播弹幕消息,自动滚动到底部
发布于 4 年前 作者 amo 5296 次浏览 来自 分享

都知道直播组件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();

下面就是效果图:

如果有更好的方法或有优化的地方,欢迎留言讨论!

回到顶部