现在流行直播带货，各大厂商纷纷搞起了自己的直播，我最近就做过一个H5直播需求，当时就在消息展示这块浪费了许多时间，最后也没做到理想的效果，所以最近空闲时，就写了这个移动端直播消息展示的组件，他叫 mobile-live-message

mobile-live-message 在线DEMO


直播间源码这么火，开源一个消息UI组件如何？_github



我这次开源的就是这个消息展示组件​​mobile-live-message​​，有了它，在写直播H5的时候是不是就省了很多心呢？

开始介绍我的组件

功能点

（1）消息发送支持单个或一次发送多个

（2）消息进入有渐变动画

（3）消息内容支持自定义html

（4）往上浏览历史时自动关闭滚动到最新消息

（5）消息区域顶部半透明（这个暂未实现，还没想到好的实现办法）

实现

组件本身代码只有80行，一个构造函数​​liveMessage​​​，一个消息发送函数​​send​​；实在没太多可讲的，你如果感兴趣可以花5分钟读一下哦；附上代码,本文主要介绍使用为主

(function (win, doc) {
    "use strict";
    function liveMessage(container, options) {
        if (!container) {
            throw 'parent element is null'
        }
        var myParentEle = document.createElement('div');
        myParentEle.className = 'mobile-live-message-box';
        myParentEle.style.width = '100%';
        myParentEle.style.height = '100%';
        myParentEle.style.overflow = 'auto';
        container.appendChild(myParentEle)
        var contentBox = document.createElement('div');
        contentBox.className = 'mobile-live-message-content-box';
        myParentEle.appendChild(contentBox);
        this.parentElement = contentBox;
        this.options = {...options};
        this.stopScroll = false;
        myParentEle.addEventListener('touchend', (e) => {
            var bottomLen = Math.abs(myParentEle.scrollTop - (contentBox.offsetHeight - myParentEle.offsetHeight));
            if (bottomLen > 30) {
                console.log('停止自动滚动底部')
                this.stopScroll = true;
                setTimeout(() => {
                    this.stopScroll = false;
                }, 50000)
            } else {
                console.log('开启滚动')
                this.stopScroll = false;
            }
        })
    }

    liveMessage.prototype.send = function (data) {
        var div = document.createElement('div');
        div.className = 'mobile-live-message-item'
        let str = '';
        if (data instanceof Array) {
            for (let index = 0; index < data.length; index++) {
                const mesItem = data[index];
                let content = mesItem;
                if (mesItem instanceof Object) {
                    content = mesItem.text;
                }
                if (this.options.format) {
                    content = this.options.format(mesItem);
                }
                str += `<div class="mobile-live-message-item-text">${content}</div>`
            }
        } else if (data instanceof Object) {
            let content = data.text;
            if (this.options.format) {
                content = this.options.format(data)
            } 
            str = `<div class="mobile-live-message-item-text">${content}</div>`
        } else {
            str = `<div class="mobile-live-message-item-text">${data || ''}</div>`
        }
        div.innerHTML = str;
        this.parentElement.appendChild(div);
        if (this.stopScroll) {
            return;
        }
        this.parentElement.parentElement.scroll({ top: div.offsetTop, left: 0, behavior: 'smooth' });
    }
    // smoothscroll-polyfill
    // 此处省略smoothscroll-polyfill源代码，具体可以去github查看全部代码
    if (typeof module !== 'undefined' && module.exports) {
      module.exports = liveMessage;
    };
    if (typeof define === 'function') define(function() { 
      return liveMessage; 
    });
    win.liveMessage = liveMessage;
 })(window, document)
复制代码

插件借助了smoothscroll-polyfill实现平滑滚动的动画，感谢smoothscroll-polyfill作者

安装插件

//npm
npm i mobile-live-message --save;
//cdn
<script src="./src/lib/index.js"></script>

复制代码

初始化插件

var parentBox = document.querySelector('#container')
var Mes = new liveMessage(parentBox,{})
复制代码

发送单条消息

var mesStr = '你好';
var mesObj = {
    text: '你好'
}
Mes.send(mesStr);
Mes.send(mesObj);
复制代码

消息如果是对象的格式，插件默认会读取​​text​​字段内容。

发送多条消息

var mesArrayStr = ['你好','你好'];
var mesArrayObj = [
    {
        text: '你好'
    },
    {
        text: '你好'
    }
]
Mes.send(mesArrayStr);
Mes.send(mesArrayObj);
复制代码

消息自定义

初始化插件的时候可以传入​​fotmat​​参数，如下

var Mes = new liveMessage(parentBox, {
    format: function(mesItem) {
        if (mesItem.type === 'rocket') {
            return `<img src="${RocketIcon}" class="icon icon-rocket"/><span>${mesItem.text}</span>`
        } else if (mesItem.type === 'flower') {
            return `<img src="${FlowerIcon}" class="icon icon-flower"/><span>${mesItem.text}</span><img src="${FlowerIcon}" class="icon icon-flower"/>`
        } else if (mesItem.type === 'face') {
            return `<img src="${FaceIcon}" class="icon icon-face"/><span>${mesItem.text}</span>`
        }
        
    }
});
 var data = [
            {
                type: 'rocket',
                text: '小火箭飞一个'
            }
        ]
Mes.send(data);
复制代码

然后你需要在插件外面写你的消息样式，插件不会做样式上的干预,因为这里的样式五花八门，没法统一。

最后附上github源码 github.com/ColdDay/mob…

作者：木法传

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。