vue文字橫向滾動公告

需求

最新項目須要一個文字橫向滾動效果，
vue 文字橫向無縫走馬燈組件
寫的很詳細，記錄下來，廣播出去。

解決方案

一、 HTML

先建一個div層做爲公告顯示區，裏面包裹一個公告列表(ul);

<div class="advert-top" v-if="message">
    <div class="ico-horn">
        <!-- 喇叭圖標 -->
        <img :src="ico_horn" alt="">
    </div>
    <!-- 滾動文字區域 -->
    <div class="marquee-wrap">
        <ul class="marquee-box" id="marquee-box">
            <!-- 循環3次爲了無縫銜接， 給第一個設置Id 方便計算文字寬度 -->
            <li class="marquee-list" v-for="i in 3" v-html="message" :id="i==1?'marquee':''"></li>
        </ul>
    </div>
</div>

二、 CSS

每條公告信息（li）的margin必須設置‘px’單位，不然要轉換，後面js中回到起點還要用到這個值。

<style>
    body,div,html,img,li,ul{margin:0;padding:0;border:0}
    li{list-style:none}
    .advert-top{position:relative;display:flex;width:100%;height:.88rem;background:linear-gradient(270deg,rgba(80,175,255,1) 0,rgba(13,132,248,1) 48%,rgba(55,159,248,1) 86%,rgba(81,176,255,1) 100%);color:#fff;font-size:.26rem;align-items:center}
    .ico-horn{display:flex;width:.88rem;height:.88rem;justify-content:center;align-items:center}
    .ico-horn>img{width:.32rem;height:.32rem}
    /* 如下代碼與滾動相關 */
    .marquee-wrap{position:relative;display:flex;overflow:hidden;width:100%;height:100%}
    .marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}
    .marquee-list{margin-right:10px} /* 此處「px」方便回到起點 */
    .marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700}
</style>

三、 JavaScript

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            ico_horn: 'https://img.alicdn.com/tfs/TB1zwftaPrguuRjy0FeXXXcbFXa-16-16.png',
            message: "全球新冠肺炎確診病例超<span>45萬</span>，死亡人數破<span>2萬</span>！",
        },
        mounted: function () {
            // 延時滾動
            setTimeout(() => {
                this.runMarquee()
            }, 1000)
        },
        methods: {
            runMarquee() {
                // 獲取文字 計算後寬度
                var width = document.getElementById('marquee').getBoundingClientRect().width,
                    marquee = document.getElementById('marquee-box'),
                    disx = 0; // 位移距離
                //設置位移
                setInterval(() => {
                    disx--; // disx-=1; 滾動步長
                    if (-disx >= width) {
                        disx = 10; // 若是位移超過文字寬度，則回到起點  marquee-list的margin值
                    }
                    // marquee.style.transform = 'translateX(' + disx + 'px)'
                    marquee.style.left = disx + 'px'
                }, 30) //滾動速度
            }
        }
    });
    // JavaScript Document
    (function px2rem(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                /*
                 * 100 -> html,body {  font-size:100px; }
                 * 750 -> 此處以 iPhone6 兩倍設計稿 寬度750px 佈局頁面
                 * 根據具體狀況改變這兩個數值
                 */
            };
        if (!doc.addEventListener) return;
        // 窗口大小發生變化，初始化
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        //防止在html未加載完畢時執行，保證獲取正確的頁寬
        setTimeout(function () {
            px2rem(doc, win);
        }, 200);
    })(document, window);
</script>