vue中實現文字滾動

vue中實現文字的滾動

需求場景如下:

1. 基本布局如下:

<template>
	<div class="" v-if="canShowTypeC.length">
    	<span class=""></span> // 圖標
    	<div class="" ref="overflowbox">
        	<p :class="scrollFlag ? 'bkpackage_typeC_middle_p' : ''" ref="overflowP">
            	<span style="display:inline-block;" ref="overflowSpan"><span v-for="(item, index) in canShowTypeC" :key="item.platform">{{ item.platform + ':' + item.version + '有用信息' + ( (index == canShowTypeC.length -1) ? '' : ',') }}
    			</span>有用信息。
    			</span>
    		</p>
    	</div>
    	<a href="javascript:;" class="" @click="handleClick">確認已完成</a>
    </div>
</template>

2. 頁面表現:

3. 基本介紹

   • 一個圖標, 中間是信息, 右側是確認
   • 布局: 大的div: flex布局, 圖標和確認定寬, 中間信息部分是flex:1
   • 大div顯示的條件是數組的長度> 0, 中間信息也與數組有關

4. 實現思路

   • 通過比較p標簽里面內容的長度與p標簽的長度: 注意這里要將p的第一個span設置成inline-block, span本身是獲取不到長度的
   • 給外面的p標簽動態綁定class,控制里面的內容是否滾動, 利用css3的animate屬性

5. 具體實現

   • 給p 和 p的一個span 設置ref, 獲取dom元素, 分別獲得 兩個元素的clientWidth
   • 比較 兩個clientWidth, 注意實際的大小.
   • 如果相等的話, 就將控制滾動class的類綁定到p上

6. 坑

   • 先使用的computed屬性, 用返回true 和 false 來控制是否滾動
     • 然而,在實際操作的時候發現, 根本獲取不到dom, 原因是因為執行這個計算屬性的時候這兩個dom元素還沒有被渲染
   • 使用watch, 監聽數組的變化, 然后定義一個變量來控制是否滾動, 通過比較大小來控制變量的true和false
     • 然而, 還是獲取不到dom, 這里使用nextTick()來解決一個渲染的問題

7. 結果

   • 能實現預期功能
   • 不能監聽窗口大小變化而改變是否滾動

8. 關鍵代碼

   watch: {
           canShowTypeC: function (val) {
               if(this.canShowTypeC.length > 0) {
                   this.$nextTick(() => {
                       var elp = this.$refs.overflowP
                       var elspan = this.$refs.overflowSpan
                       if(elspan.clientWidth == elp.clientWidth) {
                           this.scrollFlag = true
                       } else {
                           this.scrollFlag = false
                       }
                   })
               }
           }
   

.middle{
    flex: 1;
    overflow: hidden;
    .bkpackage_typeC_middle_p {
        width: 100%;
        white-space: nowrap;
        animation: 10s wordsLoop linear infinite normal;
    }
}


@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}