这种轮播图怎么实现呢？

Question

这种中间高亮选中，类似向上滚动的，轮播图

Answer 1

Demo:

在根据需要改一下就好了

<template>
  <div class="index">
    <div class="scroll">
      <ul :style="{top}">
        <li class="lastDataStyle"> {{ lastData }}</li>
        <li class="nowDataStyle"> {{ nowData }}</li>
        <li class="nextDataStyle"> {{ nextData }}</li>
      </ul>
    </div>
 
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      scrollList: [
        "11111111", "22222222222", "3333333333", "4444444444444",
        "555555555", "6666666666", "7777777777777", "888888888888"
      ],
      top: "",
      scrollIndex: 0,
      p: "",
      lastData: "",
      nowData: "",
      nextData: ""
    }
  },
  mounted() {
    this.goScroll()
    //监听鼠标滚动事件
    window.addEventListener('mousewheel', this.mouseWheelScroll);
  },
  methods: {
    goScroll() {
      clearInterval(this.p);
      this.setData(this.scrollIndex);
      this.continueScroll();
      this.p = setInterval(() => {
        this.setData(this.scrollIndex);
        this.continueScroll();
      }, 1000);
    },
    //给文字滚动赋值
    setData(_index) {
      var lastIndex = _index == 0 ? this.scrollList.length - 1 : _index - 1;
      this.lastData = this.scrollList[lastIndex];
      this.nowData = this.scrollList[_index];
      var nextIndex = _index == this.scrollList.length - 1 ? 0 : _index + 1;
      this.nextData = this.scrollList[nextIndex];
    },
    //滚动下标处理 每次加一
    continueScroll() {
      var _index = this.scrollIndex;
      var nextIndex = _index < this.scrollList.length - 1 ? _index + 1 : 0;
      this.scrollIndex = nextIndex;
    },
    //鼠标滑动事件
    mouseWheelScroll(e) {
      var deltaY = e.deltaY;
      console.log("deltaY = " + deltaY)
      if (deltaY < 0) {  //向下滚动 deltaY = -250
        var _index = this.scrollIndex;
        var nextIndex = _index == 0 ? _index - 1 : this.scrollList.length - 1;
        nextIndex = nextIndex < 0 ? this.scrollList.length - 1 + nextIndex  : nextIndex ;
        this.scrollIndex = nextIndex;
      }
      console.log("mouseWheelScroll  index = " + this.scrollIndex)
      clearInterval(this.p);
      this.setData(this.scrollIndex);
      this.continueScroll();
    }
  },
  destroyed() {
    clearInterval(this.p);
  }
}
 
</script>
<style lang="scss" scoped>
img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 20px
}
 
ul {
  position: relative;
  color: #ff4d51;
}
 
li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
  height: 60px;
  line-height: 60px;
  text-align: left;
  margin: 0;
  font-size: 14px
 
}
 
.scroll {
  height: 180px;
  overflow: hidden;
  font-size: 0px;
  position: relative;
  text-align-last: center;
  width: 300px;
  margin: 0 auto;
}
 
.transition {
  transition: top 0.5s
}
 
.lastDataStyle {
  color: dimgrey;
  transform: rotateX(45deg);
}
 
.nowDataStyle {
  color: #0000FE;
  font-weight: bold;
  font-size: 20px;
}
 
.nextDataStyle {
  color: dimgrey;
  transform: rotateX(-45deg);
}
</style>

https://blog.csdn.net/qq_35131811/article/details/123278565