基於手淘 flexible 的 Vue 組件：TextScroll -- 文字滾動

時間 2019-11-16

標籤基於 flexible vue 組件 textscroll 文字滾動欄目 Flex 简体版

原文原文鏈接

vue-flexible-components

基於手淘 flexible.js 的 Vue 組件html

前言：vue

目前手頭的移動端Vue項目是用手淘的 lib-flexible 做適配的，並用 px2rem 來自動轉換成rem。關於lib-flexible和px2rem的配置，請移步 vue-cli 配置 flexible。

因爲使用rem做適配，致使現有的不少移動端UI框架不能與之很好的配合，每每須要大動干戈更改UI框架的樣式，背離了使用UI框架達到快速開發的初衷。

爲了之後項目的組件複用，以及提升開發可複用組件的能力，特把平時項目中經常使用的、簡單的 組件單獨拎出來。

此爲小白之做，論代碼質量、難易程度、複用度，遠不及各位大佬之傑做，求輕噴。同時，也懇請各位，提出意見和建議，不勝感激！

GitHub地址：vue-flexible-components

TextScroll -- 文字滾動

效果展現

代碼分析

利用vue的列表過渡 transition-group來進行動畫渲染。滾動元素都是相對於滾動視口絕對定位，利用定時器循環更改當前顯示索引，配合Vue的過渡屬性，達到這種滾動效果。

dom結構

<div class="TextScroll">
    <transition-group tag="ul" :name="scrollType">
      <li
        v-for="(item,index) in dataList"
        :key='index'
        v-show="index==count"
      >
          <!-- <router-link to=""> -->
              <p>{{item.text}}</p>     // 因各項目數據結構不同，需手動修改此處結構和屬性值
          <!-- </router-link> -->
      </li>
    </transition-group>
</div>

data數據

data() {
    return {
        count: 0, // 當前索引  當v-for中的index等於count時 v-show=true 即顯示當前元素
        intervalId: null, // 定時器ID
        playTime: 2000, // 定時器執行間隔

    }
},

methods方法

methods: {
    getText() {
        let len = this.dataList.length; // 獲取數組長度
        if (len == 0) {
            return // 當數組爲空時，直接返回
        }
        if (this.count == len - 1) { // 當前爲最後一個時
            this.count = 0 // 從第一個開始
        } else {
            this.count++ // 自增
        }
    }
},

created時開啓定時器執行上面的方法

created() {
    this.intervalId = setInterval(()=>{ // 定義定時器
        this.getText();
    }, this.playTime)
},

destroyed 時清除定時器，尤爲spa頁面要注意，不然會一直跑下去
```
destroyed() {
    clearInterval(this.intervalId) // 清除定時器
}
```

CSS 樣式。仍是比較重要的，想要什麼樣的動畫效果，全靠這來控制

/* 向上滾動動畫 */
.scroll-up-enter-active,
.scroll-up-leave-active{
    transition: all .5s ease;
}
.scroll-up-enter{
    transform: translate3d(0,100%,0);
}
.scroll-up-leave-to{
    transform: translate3d(0,-100%,0);
}



/* 向上勻速滾動動畫 */
.scroll-up-linear-enter-active,
.scroll-up-linear-leave-active{
    transition: all 1s linear;  /*此時間必須和 playTime 保持一致*/
}
.scroll-up-linear-enter{
    transform: translate3d(0,100%,0);
}
.scroll-up-linear-leave-to{
    transform: translate3d(0,-100%,0);
}



/* 向左滾動動畫 */
.scroll-left-enter-active,
.scroll-left-leave-active{
    transition: all 1s ease;
}
.scroll-left-enter{
    transform: translate3d(100%,0,0);
}
.scroll-left-leave-to{
    transform: translate3d(-100%,0,0);
}



/* 向左勻速滾動動畫 */
.scroll-left-linear-enter-active,
.scroll-left-linear-leave-active{
    transition: all 4s linear;   /*此時間必須和 playTime 保持一致*/
}
.scroll-left-linear-enter{
    transform: translate3d(100%,0,0);
}
.scroll-left-linear-leave-to{
    transform: translate3d(-100%,0,0);
}

使用說明

組件地址：src/components/TextScroll.vue （不能npm，只能手動下載使用）
下載並放入本身項目中 —— import 引入組件 —— components中註冊組件 —— 使用

props

props	說明	類型	可選值	默認值
dataList	滾動文字數據 (因爲數據結構不一樣，需更改組件內的dom結構)	Array		[ ]
scrollType	滾動效果	String	'scroll-up''scroll-up-linear''scroll-left''scroll-left-linear'	'scroll-up'

示例

<text-scroll
      :dataList="data"
      scrollType="scroll-up"
  >
  </text-scroll>

存在問題
- 複用性差
  
  雖然說做了簡單的封裝，可是複用性仍是比較差。好比：對dataList的處理比較粗糙，因爲每一個項目的數據結構不一樣，每次需手動修改組件內的dom結構。水平有限，暫時還想不出不用修改組件dom結構的方法，實現高度複用性。
  git
- PC 端，當滾動時，文字比較模糊
  
  尤爲那兩個勻速滾動，在pc上顯示時，文字比較模糊，移動端稍微好些，難道是position:absolute致使的？但是不用這種定位方式又該怎麼作呢？糾結中...
  github
- 樣式疊加，錯亂
  
  在pc端測試時，當瀏覽器打開多個窗口（其中一個是本組件展現頁）。從本組件展現頁切換到其它窗口，在其它窗口再回到此頁面時，會發生短暫的樣式錯位，一兩秒後又恢復正常。
  vue-cli
結束語

第一次封裝Vue組件，戰戰兢兢,雖然說是很簡單的組件，到我手中也是問題不斷。可是，我卻很享受這個過程，由於我始終堅信，能力就是在不斷探索中提升的，沒有挫折，哪能進步！

同時,也懇請各位大佬，對上述問題，提出意見和建議，祝我一臂之力，不勝感激！

其它組件也將會在GitHub vue-flexible-components 中陸續更新，敬請關注。