评论

cover-view小程序直播弹幕消息,自动滚动到底部

都知道直播组件live-player是不支持view这些普通元素的,所以弹幕内容都需要放在cover-view中,下面弹幕列表,自动滚动到底部的代码

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


下面就是效果图:

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

最后一次编辑于  2020-08-14  
点赞 1
收藏
评论

4 个评论

  • 溶解
    溶解
    04-19

    ios 这个方法好使吗


    04-19
    赞同
    回复 1
    • A丶W6
      A丶W6
      04-26
      可以去试试,测试了也挺好使的
      04-26
      回复
  • Z. H
    Z. H
    2020-12-30

    键盘弹出时 调用这个方法键盘就收回了,这该咋解决

    2020-12-30
    赞同
    回复 1
    • A丶W6
      A丶W6
      01-27
      这个可以根据自己的项目需求优化一下嘛
      01-27
      回复
  • Mo sir
    Mo sir
    2020-12-22

    这个在ios系统下会出现滚动区域不见的情况,这怎么解决哟!安卓正常

    2020-12-22
    赞同
    回复 2
    • A丶W6
      A丶W6
      01-27
      看看小程序的版本库是不是比较低呢,或者再根据自己的项目调整优化下代码
      01-27
      回复
    • Spring '初心
      Spring '初心
      07-16
      兄弟,这个问题解决没有
      07-16
      回复
  • Pro
    Pro
    2020-09-18

    这个能看详细的滚动嘛 ,我现在也是 要做弹幕的的滚动

    2020-09-18
    赞同
    回复 1
    • A丶W6
      A丶W6
      2020-10-26
      详细的滚动另外再做一个底部弹层,调用另一个接口也是可以的。
      2020-10-26
      回复
登录 后发表内容