Vue.js實現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果

更新時間：2019年11月29日 09:08:08 作者：TZ張無忌

大屏數(shù)字滾動翻轉(zhuǎn)效果來源于最近工作中element后臺管理頁面一張大屏的UI圖，該UI圖上有一個模塊需要有數(shù)字往上翻動的效果。本文通過截圖代碼的形式給大家介紹Vue.js實現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果，感興趣的朋友一起看看吧

大屏數(shù)字滾動翻轉(zhuǎn)效果來源于最近工作中element后臺管理頁面一張大屏的UI圖，該UI圖上有一個模塊需要有數(shù)字往上翻動的效果，以下是最終實現(xiàn)的效果：

整體思路：

在實現(xiàn)此效果之前，我們先來捋一下思路，用思維導(dǎo)圖來設(shè)計一下我們的實現(xiàn)步驟，如下：

你可以審查元素，下載數(shù)字背景圖片，復(fù)制圖片地址，或者使用其他背景圖片、背景顏色

有了以上的設(shè)計流程，我們先來簡單實現(xiàn)一下：

// CSS代碼
<style>
.box-item {
 position: relative;
 display: inline-block;
 width: 54px;
 height: 82px;
 /* 背景圖片 */
 background: url(./number-bg.png) no-repeat center center;
 background-size: 100% 100%;
 font-size: 62px;
 line-height: 82px;
 text-align: center;
}
</style>

// htm代碼
<div class="box">
 <p class="box-item">
 <span>1</span>
 </p>
</div>

實現(xiàn)以上代碼后，它的效果將是下面這樣的：

思考：

背景框中有了數(shù)字以后，我們現(xiàn)在來思考一下，背景框中的文字，一定是0-9之前的數(shù)字，要在不打亂以上html結(jié)構(gòu)的前提下，如何讓數(shù)字滾動起來呢？這個時候我們的魔爪就伸向了一個CSS屬性：writing-mode，下面是它屬性的介紹：

horizontal-tb：默認(rèn)值，表示水平排版，從上到下。
vertical-lr：表示垂直排版，從左到右。
vertical-rl：表示垂直排版，從右到左。

它的實時效果是像下面這樣：

根據(jù)以上的靈感，我們可以實現(xiàn)下面這樣的效果：

代碼如下：

// html部分
<p class="box-item">
 <span>0123456789</span>
</p>

// style部分
.box-item {
 display: inline-block;
 width: 54px;
 height: 82px;
 background: url(./number-bg.png) no-repeat center center;
 background-size: 100% 100%;
 font-size: 62px;
 line-height: 82px;
 text-align: center;
 position: relative;
 writing-mode: vertical-lr;
 text-orientation: upright;
 /* overflow: hidden; */
}
.box-item span {
 position: absolute;
 top: 10px;
 left: 50%;
 transform: translateX(-50%);
 letter-spacing: 10px;
}

計算滾動

如果我們想讓數(shù)字滾動到5，那么滾動的具體到底是多少？

答案是：向下滾動-50%

那么其他的數(shù)字呢？

得益于我們特殊的實現(xiàn)方法，每一位數(shù)字的滾動距離有一個通用的公式：

transform: `translate(-50%,-${number * 10}%)

有了以上公式，我們讓數(shù)字滾動到5，它的效果如下：

代碼加上 `transform: `translate(-50%,-${number * 10}%)`，示例如下

.box-item span {
 position: absolute;
 top: 10px;
 left: 50%;
 transform: translate(-50%,-50%);
 letter-spacing: 10px;
}

滾動動畫的實現(xiàn)

在知道了每一個數(shù)字具體的滾動距離后，我們來設(shè)計一下，讓數(shù)字能夠隨機滾動起來：

一下是讓數(shù)字隨機滾動的JS

setInterval(() => {
 let number = document.getElementById('Number')
 let random = getRandomNumber(0,10)
 number.style.transform = `translate(-50%, -${random * 10}%)`
}, 2000)
function getRandomNumber (min, max) {
 return Math.floor(Math.random() * (max - min + 1) + min)
}

至此，我們數(shù)字滾動效果已經(jīng)初步實現(xiàn)了，在下一節(jié)中我們將會逐步完善此效果，以滿足業(yè)務(wù)需求。

完善

在上一節(jié)中，我們初步完成了滾動的效果，這一節(jié)我們將根據(jù)最開始的思維導(dǎo)圖來設(shè)計一個通用的Vue業(yè)務(wù)組件

因為我們的業(yè)務(wù)需要，我們最大的位數(shù)是8位數(shù)字，所以對不足八位進行補位：

假如傳遞的位數(shù)不足8位，我們需要對它進行補0的操作，補0完成以后，我們也需要把它轉(zhuǎn)換成金額的格式

toOrderNum(num) {
  num = num.toString()
  // 把訂單數(shù)變成字符串
  if (num.length < 8) {
  num = '0' + num // 如未滿八位數(shù)，添加"0"補位
  this.toOrderNum(num) // 遞歸添加"0"補位
  } else if (num.length === 8) {
  // 訂單數(shù)中加入逗號
  num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
  this.orderNum = num.split('') // 將其便變成數(shù)據(jù)，渲染至滾動數(shù)組
  } else {
  // 訂單總量數(shù)字超過八位顯示異常
  this.$message.warning('訂單總量數(shù)字過大，顯示異常，請聯(lián)系客服')
  }
 },

渲染

我們根據(jù)上面補位字符串，分隔成字符數(shù)組，在頁面中進行渲染：

computeNumber:為字符數(shù)組，例如：['0','0',',','0','0','0',',','9','1','7']

// html代碼
<ul>
 <li
 :class="{'number-item': !isNaN(item) }"
 v-for="(item,index) in computeNumber"
 :key="index"
 >
 <span v-if="!isNaN(item)">
  <i ref="numberItem">0123456789</i>
 </span>
 <span v-else>{{item}}</span>
 </li>
</ul>


// CSS代碼
.number-item {
 width: 50px;
 background: url(./number-bg.png) no-repeat center center;
 background-size:100% 100%;
 & > span {
 position: relative;
 display: inline-block;
 margin-right: 10px;
 width: 100%;
 height: 100%;
 writing-mode: vertical-rl;
 text-orientation: upright;
 overflow: hidden;
 & > i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  transition: transform 0.5s ease-in-out;
  letter-spacing: 10px;
 }
 }
}

頁面渲染效果：

數(shù)字隨機增長，模擬輪詢效果

頁面渲染完畢后，我們來讓數(shù)字滾動起來，設(shè)計如下兩個方法，其中increaseNumber需要在Vue生命周期mounted函數(shù)中調(diào)用

// 定時增長數(shù)字
increaseNumber () {
 let self = this
 this.timer = setInterval(() => {
 self.newNumber = self.newNumber + getRandomNumber(1, 100)
 self.setNumberTransform()
 }, 3000)
},
// 設(shè)置每一位數(shù)字的偏移
setNumberTransform () {
 let numberItems = this.$refs.numberItem
 let numberArr = this.computeNumber.filter(item => !isNaN(item))
 for (let index = 0; index < numberItems.length; index++) {
 let elem = numberItems[index]
 elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
 }
}

最終實現(xiàn)效果：

完整代碼如下：

<template>
 <div class="chartNum">
    <h3 class="orderTitle">訂單總量</h3>
    <div class="box-item">
     <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
      v-for="(item,index) in orderNum"
      :key="index">
       <span v-if="!isNaN(item)">
        <i ref="numberItem">0123456789</i>
       </span>
      <span class="comma" v-else>{{item}}</span>
     </li>
    </div>
   </div>
</template>
<script>
 export default {
  data() {
   return {
    orderNum: ['0', '0', ',', '0', '0', '0', ',', '0', '0', '0'], // 默認(rèn)訂單總數(shù)
   }
  }
  mounted: {
   this.toOrderNum(num) // 這里輸入數(shù)字即可調(diào)用
  },
  methods: {
    // 設(shè)置文字滾動
   setNumberTransform () {
    const numberItems = this.$refs.numberItem // 拿到數(shù)字的ref，計算元素數(shù)量
    const numberArr = this.orderNum.filter(item => !isNaN(item))
    // 結(jié)合CSS 對數(shù)字字符進行滾動,顯示訂單數(shù)量
    for (let index = 0; index < numberItems.length; index++) {
    const elem = numberItems[index]
    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
    }
   },
   // 處理總訂單數(shù)字
   toOrderNum(num) {
    num = num.toString()
    // 把訂單數(shù)變成字符串
    if (num.length < 8) {
    num = '0' + num // 如未滿八位數(shù)，添加"0"補位
    this.toOrderNum(num) // 遞歸添加"0"補位
    } else if (num.length === 8) {
    // 訂單數(shù)中加入逗號
    num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
    this.orderNum = num.split('') // 將其便變成數(shù)據(jù)，渲染至滾動數(shù)組
    } else {
    // 訂單總量數(shù)字超過八位顯示異常
    this.$message.warning('訂單總量數(shù)字過大，顯示異常，請聯(lián)系客服')
    }
   },
  }
 }
</script>
<style scoped lang='scss'>
  /*訂單總量滾動數(shù)字設(shè)置*/
 .box-item {
  position: relative;
  height: 100px;
  font-size: 54px;
  line-height: 41px;
  text-align: center;
  list-style: none;
  color: #2D7CFF;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止編輯*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit瀏覽器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期瀏覽器*/
  user-select: none;
  /* overflow: hidden; */
 }
 /* 默認(rèn)逗號設(shè)置 */
 .mark-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
  & > span {
   position: absolute;
   width: 100%;
   bottom: 0;
   writing-mode: vertical-rl;
   text-orientation: upright;
  }
 }
 /*滾動數(shù)字設(shè)置*/
 .number-item {
  width: 41px;
  height: 75px;
  background: #ccc;
  list-style: none;
  margin-right: 5px;
  background:rgba(250,250,250,1);
  border-radius:4px;
  border:1px solid rgba(221,221,221,1);
  & > span {
   position: relative;
   display: inline-block;
   margin-right: 10px;
   width: 100%;
   height: 100%;
   writing-mode: vertical-rl;
   text-orientation: upright;
   overflow: hidden;
   & > i {
    font-style: normal;
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translate(-50%,0);
    transition: transform 1s ease-in-out;
    letter-spacing: 10px;
   }
  }
 }
 .number-item:last-child {
  margin-right: 0;
 }
</style>

總結(jié)

以上所述是小編給大家介紹的Vue.js實現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: