vue-无缝滚动+高亮某一行

最新推荐文章于 2024-08-23 08:09:39 发布

rm_ing

最新推荐文章于 2024-08-23 08:09:39 发布

阅读量1.3k

点赞数 1

分类专栏：前端 vue

本文链接：https://blog.csdn.net/qq_35355153/article/details/107319744

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

vue实现无缝滚动首先一开始参考了

https://www.cnblogs.com/liuerpeng/p/11724257.html但是实现的效果会出现一点点的停顿

后面决定使用插件vue-seamless-scroll

npm install vue-seamless-scroll --save

在main.js里面

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

页面上

<vue-seamless-scroll
            :data="data"
            class="seamless-warp"
            :class-option="classOption"
            ref="unitScroll"
          >
            <ul
              class="infinite-list"
              @mouseenter="mEnter"
              @mouseleave="mLeave"
            >
              <li
                v-for="(item,index) in data"
                :class="item.active  ? 'infinite-list-item item-active' : 'infinite-list-item'"
                :key="index"
                @click="clickSelectedUnit(index)"
              >
                <div class="infinite-left">{{ item.xxx }}</div>
                <div class="infinite-right">{{item.xxxx}}</div>
                <div class="infinite-right">{{item.xxxxx}}</div>
              </li>
            </ul>
</vue-seamless-scroll>

通过计数器去进行计数并根据当前transform得出在第二行的数据是那一个然后进行高亮，具体可以看scroll方法

computed: {
    classOption() {
      return {
        hoverStop: true,
        step: 0.3
      };
    }
  },

mounted() {
    let self = this;
    this.getData();
    // 无缝滚动计数器
    if (this.timer1) {
      clearInterval(this.timer1); // 如果有先清除计数器
    }
    this.timer1 = setInterval(self.scroll, 50); // 开始计数
  },

data(){
    return {
        timer1:"",
        data:[]
    }
}

methods:{
    getData(){
        //todo
    },

    // 高亮某一行
    scroll() {
      let self = this;
      let parentNode = document.getElementsByClassName("infinite-list")[0]
        .parentNode.parentNode;
      let translates = parentNode.style.transform;
      let result = translates.match(/\(([^)]*)\)/); // 正则()内容
      let matrix = result ? result[1].split(",") : translates.split(",");
      let y = parseFloat(matrix[1]); // 拿到transyform的y的值
      let height = Math.floor(Math.abs(y) / 36) + 1;
      let child = document.getElementsByClassName("infinite-list")[1]
        .childNodes;
      if (height >= self.data.length) {
        child[0].classList.add("item-active");
        self.clickSelectedUnit(0);
      } else {
        child[0].classList.remove("item-active");
        self.clickSelectedUnit(height);
      }
    },

    // 鼠标移入
    mEnter() {
      clearInterval(this.timer1);
    },

    // 鼠标移出
    mLeave() {
      this.timer1 = setInterval(this.scroll, 50);
    },

    // 实有单位选中某一行高亮
    clickSelectedUnit(i) {
      this.data.forEach((item, index) => {
        if (index == i) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
}

.seamless-warp {
    overflow: hidden;
    margin: calc(1vh) vw(0) calc(2.2vh) vw(0);
  }
  .infinite-list {
    padding: 0px vw(20);

    .infinite-list-item {
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #222222;
      margin-bottom: 5px;
      list-style: none;
      div {
        width: vw(140);
      }
    }
    .item-active {
      background-color: #f4f8ff;
      color: #3e7bff;
    }
  }