vue 数字轮巡滚动增减效果

要求：轮巡调接口查询数据是否有增减，显示实时数据

<template>
  <div class="demo2">
    <div class="part2">
      <div
        class="number-content"
        style="display: flex; justify-content: center"
      >
        <div class="number-left number-strong" style="position: relative">
          <span class="number-left-number-2"></span>
        </div>
      </div>
    </div>
  </div>
</template>

js

<script>
import $ from "jquery";
var _this = this;
var numItemHeight; // 生命dom高度变量
var rollInterval0, rollInterval1, rollInterval2, rollInterval3; // 本来是同时有四个展示区域，可根据业务情况增减
export default {
  props: {
    value: {
      default: 0,
    },
  },
  data() {
    return {
      rollInterval: {
        rollInterval0,
        rollInterval1,
        rollInterval2,
        rollInterval3,
      },
      arr: 0,
    };
  },
  watch: {
    'value':function(val){
      this.arr = val
      this.init()
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.initPage($(".number-left-number-2"), this.arr.toString().length); //：显示数据位数
      numItemHeight = numItemHeight = $(".num-item").eq(0).height(); // 获取数字dom的高度
      this.numberRoll($(".number-left-number-2"), this.arr);
      this.rollInterval["rollInterval2"] = setInterval(() => {
        // this.arr += Math.floor(Math.random() * 20); // 随机变化数据，用于调试
        this.numberRoll($(".number-left-number-2"), this.arr); //传值过来的数据可用这个
      }, 3000);
    },
    initPage(container, digit) {
      var uId = this.generateUniqueId();
      var _html = "";
      for (var i = digit - 1; i >= 0; i--) {
        if(i!=0 && i%3===0){ // 千分号展示
           _html +=
          '<div class="number num' +
          i +
          '">' +
          '<div class="numbers-view">' +
          '<div class="num-item zero">0</div>' +
          '<div class="num-item one">1</div>' +
          '<div class="num-item two">2</div>' +
          '<div class="num-item three">3</div>' +
          '<div class="num-item four">4</div>' +
          '<div class="num-item five">5</div>' +
          '<div class="num-item six">6</div>' +
          '<div class="num-item seven">7</div>' +
          '<div class="num-item eight">8</div>' +
          '<div class="num-item nine">9</div>' +
          "</div>" +
          "</div>"+'<span style="height:110px;line-height:135px;">,</span>';
        }else{
           _html +=
          '<div class="number num' +
          i +
          '">' +
          '<div class="numbers-view">' +
          '<div class="num-item zero">0</div>' +
          '<div class="num-item one">1</div>' +
          '<div class="num-item two">2</div>' +
          '<div class="num-item three">3</div>' +
          '<div class="num-item four">4</div>' +
          '<div class="num-item five">5</div>' +
          '<div class="num-item six">6</div>' +
          '<div class="num-item seven">7</div>' +
          '<div class="num-item eight">8</div>' +
          '<div class="num-item nine">9</div>' +
          "</div>" +
          "</div>";
        }
       
      }
      container.html(_html);
    },
    // 生成唯一主键id
    generateUniqueId() {
      var d = new Date().getTime();
      var uuid = "xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    },
    // 数组滚动
    numberRoll(container, total) {
      var number = total.toString().split("").reverse().join("");
      // console.log(number,'99999')
      for (var i = 0; i < number.length; i++) {
        // 目标值如果比原本值大，则向上滚动，如果小则向下滚动（0 -> 3 从下往上滚动3个单元格高度 margeTop = -90px 反之 从上往下滚3个单元格高度 margeTop = 90px）
        var height = parseInt(number[i]) * numItemHeight;
        $(container)
          .find(".num" + i + " .numbers-view")
          .animate({ marginTop: -height }, 1000, "swing");
      }
    },
  },
};
</script>

css

<style lang="scss" scoped>
.number-left-number-2 {
  display: flex;
  .number {
    height: 110px;
    line-height: 110px;
    font-size: 110px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    font-family: AgencyFB-Regular !important;
    font-weight: Reg;
    color: #1dffe6;
    letter-spacing: 14px;
  }
}
</style>

以上共勉，有不当之处希望指正~