标签：flex 封装 items 50% transform value width 滚动 无缝

//tableRun.vue
<template>
  <div id="table_scroll">
    <div class="table_header">
      <div
        class="head_td"
        v-for="(item, index) in headLists"
        :key="index"
        :style="own_width(item.width)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="table_main">
      <div
        class="table_box"
        @mouseenter.stop="mouseover"
        @mouseleave.stop="mouseout"
      >
        <div class="table_row" v-for="(item, index) in listTrue" :key="index">
          <div
            class="table_td"
            v-for="(item_td, index) in headLists"
            :key="index"
            :style="own_width(item_td.width)"
          >
            {{ item[item_td.value] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "scrollTable",
  props: {
    hideString: {
      type: Array,
      default: function () {
        return ["zjhm", "lxhm"];
      },
    },
    headLists: {
      type: Array,
      default: function () {
        return [];
      },
    },
    dataLists: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      timer: null,
    };
  },
  computed: {
    listTrue() {
      let lists = this.dataLists;
      let hideOne = this.hideString[0];
      let hideTwo = this.hideString[1];
      lists.map((item) => {
        if (item[hideOne] && item[hideTwo]) {
          item[hideOne] =
            item[hideOne].substring(0, 4) +
            "**********" +
            item[hideOne].substring(
              item[hideOne].length - 4,
              item[hideOne].length
            );
          item[hideTwo] =
            item[hideTwo].substring(0, 3) +
            "****" +
            item[hideTwo].substring(
              item[hideTwo].length - 4,
              item[hideTwo].length
            );
          return item;
        }
      });
      if (this.dataLists.length <= 14) return this.dataLists;
      lists.push({});
      return lists.concat(lists);
    },
    own_width() {
      return function (param) {
        if(!param){
          return {}
        }
        return {
        width: param,
        flex: "none!important",
      }
      }
    },
  },
  mounted() {
    if (this.dataLists.length <= 14) return;
    this.go();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    goscroll() {
      let table_main = document.getElementsByClassName("table_main")[0];
      let table_box = document.getElementsByClassName("table_box")[0];
      if (table_main.scrollTop >= table_box.scrollHeight / 2) {
        table_main.scrollTop = 0;
      } else {
        table_main.scrollTop++;
      }
    },
    go() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(this.goscroll, 10);
    },
    mouseover() {
      clearInterval(this.timer);
      console.log("over");
    },
    mouseout() {
      this.go();
      console.log("out");
    },
  },
};
</script>

<style lang="less" scoped>
#table_scroll {
  .table_header {
    width: 1751px;
    height: 61px;
    background-color: #244479;
    color: #fff;
    display: flex;
    .head_td {
      font-size: 18px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table_main {
    width: 1751px;
    height: 826px;
    background-color: black;
    overflow: scroll;
    .table_box {
      width: 1751px;
      background-color: gray;
      .table_row {
        width: 1751px;
        height: 59px;
        display: flex;
        .table_td {
          font-size: 18px;
          color: #fff;
          flex: 1;
        }
      }
    }
  }
}

// 隐藏滚轮
::-webkit-scrollbar {
  display: none;
}

// table row style
.table_box .table_row:nth-child(even) {
  // background-color: #244479;
  background-color: rgba(36, 68, 121, 0.4);
}
.table_box .table_row:nth-child(odd) {
  // background-color: #244479;
  background-color: rgba(36, 68, 121, 0.2);
}

// table td center
.table_td {
  display: flex;
  justify-content: center;
  align-items: center;
}
.own_width {
  width: 200px;
  flex: none !important;
}
</style>

//numRun.vue
<template>
  <div id="run_num">
    <div class="run_left" :style="leftBck">
      <div class="four_before">
        <div
          class="num_scroll"
          v-for="(item, index) in clocks_left"
          :key="index"
        >
          <span v-if="!isNaN(item)">
            <i ref="numRef_left"
              ><span
                v-for="(iItem_before, iIndex_before) in iArray_before"
                :key="iIndex_before"
                >{{ iItem_before }}</span
              ></i
            >
          </span>
          <span v-else>{{ item }}</span>
        </div>
      </div>
      <div class="star_icon">
        <span class="star_span" v-for="(item, index) in starList" :key="index"
          >*</span
        >
      </div>
      <div class="four_after">
        <div
          class="num_scroll"
          v-for="(item, index) in clocks_right"
          :key="index"
        >
          <span v-if="!isNaN(item)">
            <i ref="numRef_right"
              ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
                iItem
              }}</span></i
            >
          </span>
          <span v-else>{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="run_right" :style="rightBck" v-if="num_type === 'address'">
      <div
        class="num_scroll"
        v-for="(item, index) in clocks_house"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numRef"
            ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
              iItem
            }}</span></i
          >
        </span>
        <span v-else>{{ item }}</span>
      </div>
    </div>
    <div
      class="run_right_other"
      :style="rightBckXh"
      v-if="num_type === 'index'"
    >
      <div class="run_right_index"><span>序</span><span>号</span></div>
      <div
        class="num_scroll"
        v-for="(item, index) in clocks_index"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numRef"
            ><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
              iItem
            }}</span></i
          >
        </span>
        <span v-else>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    num_scroll: {
      handler: function (val) {
        console.log(val);
        this.setNumberTransform_house(val.param);
        this.setNumberTransform(val.sfz_start, val.sfz_end);
      },
      deep: true,
    },
  },
  props: {
    num_type: {
      type: String,
      default: "address",
      // default: "index"
    },
    num_scroll: {
      type: Object,
      default: function () {
        return { sfz_start: "1111", sfz_end: "1111", param: "000000" };
      },
    },
  },
  data() {
    return {
      leftBck: {
        backgroundImage: "url(" + require("../assets/sfz.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      rightBck: {
        backgroundImage: "url(" + require("../assets/fh.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      rightBckXh: {
        backgroundImage: "url(" + require("../assets/xh.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%,cover",
      },
      clocks_left: [0, 0, 0, 0],
      clocks_right: [0, 0, 0, 0],
      clocks_house: [0, "-", 0, "-", 0, "-", 0, 0, 0],
      clocks_index: [0, 0, 0, 0],
      starList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      iArray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      iArray_before: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  mounted() {
    setInterval(() => {
      // let count = this.getRandomNumber(0, 9999);
      // this.setNumberTransform(count);
      // let count_house = this.getRandomNumber(0, 999999);
      // this.setNumberTransform_house(count_house);
    }, 1000);
  },
  methods: {
    setNumberTransform(count1, count2) {
      // 空位补齐
      let newNumber1 = this.PrefixZero(count1, 4);
      let newNumber2 = this.PrefixZero(count2, 4);
      let items_left = this.$refs.numRef_left;
      let items_right = this.$refs.numRef_right;
      for (let i = 0; i < items_left.length; i++) {
        let el_left = items_left[i];
        // 兼容浏览器
        el_left.style.transform = `translate(-50%, -${newNumber1[i] * 10}%)`;
        el_left.style.transform = `-ms-translate(-50%, -${
          newNumber1[i] * 10
        }%)`;
        el_left.style.transform = `-moz-translate(-50%, -${
          newNumber1[i] * 10
        }%)`;
        el_left.style.transform = `-o-translate(-50%, -${newNumber1[i] * 10}%)`;
      }
      for (let i = 0; i < items_right.length; i++) {
        let el_right = items_right[i];
        // 兼容浏览器
        el_right.style.transform = `translate(-50%, -${newNumber2[i] * 10}%)`;
        el_right.style.transform = `-ms-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
        el_right.style.transform = `-moz-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
        el_right.style.transform = `-o-translate(-50%, -${
          newNumber2[i] * 10
        }%)`;
      }
    },
    setNumberTransform_house(count) {
      //区分type
      if (this.num_type === "index") {
        // 空位补齐
        let newNumber = this.PrefixZero(count, 3);
        let items = this.$refs.numRef;
        console.log(items);
        for (let i = 0; i < items.length; i++) {
          let el = items[i];
          // 兼容浏览器
          el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
        }
      } else if (this.num_type === "address") {
        // 空位补齐
        let newNumber = this.PrefixZero(count, 6);
        let items = this.$refs.numRef;
        console.log(items);
        for (let i = 0; i < items.length; i++) {
          let el = items[i];
          // 兼容浏览器
          el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
          el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
          // debugger
        }
      }
    },
    // 获取随机数
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // num: 被操作数 , n 固定的总位数
    PrefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    },
  },
};
</script>

<style lang="less" scoped>
#run_num {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  width: 1826px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  .run_left {
    width: 1300px;
    height: 120px;
    display: flex;
    .four_before {
      width: 301px;
      display: flex;
      box-sizing: border-box;
      padding-left: 20px;
      .num_scroll {
        flex: 1;
        color: #fff;
        font-size: 80px;
        span {
          position: relative;
          display: inline-block;
          overflow: hidden;
          width: 100%;
          height: 100%;
          // writing-mode: vertical-rl;
          // text-orientation: upright;
          i {
            width: 100%;
            position: absolute;
            // top: 50%;
            top: 0;
            // margin-top: -44px;
            left: 50%;
            // letter-spacing: 10px;
            transition: transform 0.5s ease-in-out;
            transform: translate(-50%, 0);
            span {
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #44ffff;
            }
          }
        }
      }
    }
    .star_icon {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 80px;
      color: #fff;
      .star_span {
        margin-top: 39px;
        color: #44ffff;
      }
    }
    .four_after {
      width: 301px;
      display: flex;
      box-sizing: border-box;
      padding-right: 22px;
      .num_scroll {
        flex: 1;
        color: #fff;
        font-size: 80px;
        span {
          position: relative;
          display: inline-block;
          overflow: hidden;
          width: 100%;
          height: 100%;
          // writing-mode: vertical-rl;
          // text-orientation: upright;
          i {
            width: 100%;
            position: absolute;
            // top: 50%;
            top: 0;
            // margin-top: -44px;
            left: 50%;
            // letter-spacing: 10px;
            transition: transform 0.5s ease-in-out;
            transform: translate(-50%, 0);
            span {
              height: 120px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #44ffff;
            }
          }
        }
      }
    }
  }
  .run_right {
    width: 500px;
    height: 120px;
    display: flex;
    box-sizing: border-box;
    padding: 0 29px 0 20px;
    .num_scroll {
      flex: 1;
      color: #fff;
      font-size: 80px;
      span {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        color: #44ffff;
        // writing-mode: vertical-rl;
        // text-orientation: upright;
        i {
          width: 100%;
          position: absolute;
          // top: 50%;
          top: 0;
          // margin-top: -44px;
          left: 50%;
          // letter-spacing: 10px;
          transition: transform 0.5s ease-in-out;
          transform: translate(-50%, 0);
          span {
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #44ffff;
          }
        }
      }
    }
  }
  .run_right_other {
    width: 500px;
    height: 120px;
    display: flex;
    box-sizing: border-box;
    padding-right: 25px;
    .run_right_index {
      width: 200px;
      font-size: 56px;
      color: #0584d9;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      span {
        flex: 1;
      }
    }
    .num_scroll {
      flex: 1;
      color: #fff;
      font-size: 80px;
      span {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        // writing-mode: vertical-rl;
        // text-orientation: upright;
        i {
          width: 100%;
          position: absolute;
          // top: 50%;
          top: 0;
          // margin-top: -44px;
          left: 50%;
          // letter-spacing: 10px;
          transition: transform 0.5s ease-in-out;
          transform: translate(-50%, 0);
          span {
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #44ffff;
          }
        }
      }
    }
  }
}
</style>

//引用组件
<template>
  <div id="app">
    <HelloWorld class="hello_com" :headLists="headLists" :dataLists="dataLists"/>
    <HelloRunNum :num_scroll="numScroll" num_type="index"/>
    <!-- <FuckWin10/>
    <FuckWin11/> -->
  </div>
</template>

<script>
import HelloWorld from './components/tableRun.vue'
import helloRunNum from './components/numRun.vue'
// import fuckWin10 from './components/fuckWin10.vue'
// import fuckWin11 from './components/fuckWin11.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    HelloRunNum:helloRunNum,
    // FuckWin10:fuckWin10,
    // FuckWin11:fuckWin11
  },
  data(){
    return {
      numScroll:{},
      headLists:[],
      dataLists:[]
    }
  },
  mounted(){
    let timer = setTimeout(() => {
      this.numScroll={sfz_start:"1234",sfz_end:"5678",param:"7890"}
      this.headLists = [{ name: "序号", value: "value",width:"100px" },
          { name: "分组", value: "fz" },
          { name: "申请人姓名", value: "sqrxm" },
          { name: "证件号码", value: "zjhm" },
          { name: "联系号码", value: "lxhm" },
          { name: "家庭人数", value: "jtrs" },
          { name: "申请人类型", value: "sqrlx", width: "300px" },
          { name: "小区名称", value: "xqmc" },
          { name: "摇号结果", value: "yhjg" },
          { name: "户型", value: "hx" }]
          this.dataLists = [{
            value: 1,
            id: "a",
            fz: "第一组",
            sqrxm: "于欢水",
            zjhm: "429004199511273119",
            lxhm: "13333333333",
            jtrs: "2",
            sqrlx: "城镇低收入住房困难家庭",
            // sqrlx: "城镇低收入住房",
            xqmc: "幸福花园",
            yhjg: "1-3-2-302",
            hx: "两室一厅",
          },
          { value: 2, id: "b" },
          { value: 3, id: "c" },
          { value: 4, id: "d" },
          { value: 5, id: "e" },
          { value: 6, id: "f" },
          { value: 7, id: "g" },
          { value: 8, id: "h" },
          { value: 9, id: "i" },
          { value: 10, id: "j" },
          { value: 11, id: "k" },
          { value: 12, id: "l" },
          { value: 13, id: "m" },
          { value: 14, id: "n" },
          { value: 15, id: "o" }]
    }, 1000);
    console.log(timer)
  }
}
</script>

<style>
#app {
  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.hello_com{
  margin-bottom: 80px;
}
</style>

标签：flex,封装,items,50%,transform,value,width,滚动,无缝
来源： https://www.cnblogs.com/chyshy/p/14972602.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。