直播這麼火，開源一個消息UI組件如何？

如今流行直播帶貨，各大廠商紛紛搞起了本身的直播，我最近就作過一個H5直播需求，當時就在消息展現這塊浪費了許多時間，最後也沒作到理想的效果，因此最近空閒時，就寫了這個移動端直播消息展現的組件，他叫 mobile-live-message

mobile-live-message 在線DEMO

我此次開源的就是這個消息展現組件mobile-live-message，有了它，在寫直播H5的時候是否是就省了不少心呢？html

開始介紹個人組件

功能點

（1）消息發送支持單個或一次發送多個

（2）消息進入有漸變更畫

（3）消息內容支持自定義html

（4）往上瀏覽歷史時自動關閉滾動到最新消息

（5）消息區域頂部半透明（這個暫未實現，還沒想到好的實現辦法）

實現

組件自己代碼只有80行，一個構造函數liveMessage，一個消息發送函數send；實在沒太多可講的，你若是感興趣能夠花5分鐘讀一下哦；附上代碼,本文主要介紹使用爲主git

(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做者github

安裝插件

//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字段內容。npm

發送多條消息

var mesArrayStr = ['你好','你好'];
var mesArrayObj = [
    {
        text: '你好'
    },
    {
        text: '你好'
    }
]
Mes.send(mesArrayStr);
Mes.send(mesArrayObj);
複製代碼

消息自定義

初始化插件的時候能夠傳入fotmat參數，以下bash

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);
複製代碼

而後你須要在插件外面寫你的消息樣式，插件不會作樣式上的干預,由於這裏的樣式五花八門，無法統一。markdown

最後附上github源碼 github.com/ColdDay/mob…app

因爲做者水平有限，可能有代碼上或者實現上的問題，歡迎指出來，謝謝函數

若是對你有幫助，給個Star唄oop