vue实现轮播图及菜单栏

轮播图

首先对页面进行布局（结构可能不太合适）

<!-- 鼠标经过时，停止自动播放 -->
<div class="banner" id="banner" @mouseover="stopPlay()" @mouseleave="autoPlay()">
    <!-- 显示图片 -->
      <a href="#">
        <!-- 根据当前显示图片索引 获得对应数据-->
        <img :src="imgs[currentIndex].src" class="banner-slide slide-active" />
      </a>
      <!-- 左右箭头 -->
      <a href="javascript:void(0)" class="button prev" id="prev" @click="prevClick()"></a>
      <a href="javascript:void(0)" class="button next" id="next" @click="nextClick()"></a>
      <!-- 小圆点 -->
      <div class="dots" id="dots">
        <template v-for="(item, index) in imgs">
         <!-- 当前小圆点索引index等于currentIndex时添加 active类 -->
         <!-- 点击小圆点切换图片，传入当前索引，将currentIndex更改为index -->
          <span :key="item.id" :class="{ active: currentIndex == index }" @click="goPage(index)"></span>
        </template>
      </div>
</div>

data中轮播图相关数据，currentIndex表示当前显示照片索引，默认为0

  //图片地址
      imgs: [
        {
          id: 0,
          src:
            'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/be3a556e9cd1896f049c122a8bab3ce2.jpg?thumb=1&w=1839&h=690&f=webp&q=90',
        },
      ],
      //当前显示图片索引
      currentIndex: 0,
      //定时器
      timer: null,

在页面挂载成功后mounted中调用自动轮播函数

 mounted() {
    this.autoPlay()
  },

点击上下箭头切换图片，改变currentIndex

 nextClick() {
      //当前索引等于图片张数-1时，到达最后一张图了，此时触发该事件
      //则应将currentIndex赋值为0，设为第一张
      if (this.currentIndex == this.imgs.length - 1) {
        this.currentIndex = 0
      } else {
        //currentIndex+1
        this.currentIndex = this.currentIndex + 1
      }
    },
    prevClick() {
      //当前索引等于0时，到达第一张图了，此时触发该事件
      //则应将currentIndex赋值为图片张数-1，设为最后一张
      if (this.currentIndex == 0) {
        this.currentIndex = this.imgs.length - 1
      } else {
        //currentIndex-1
        this.currentIndex = this.currentIndex - 1
      }
    },

停止自动播放函数

stopPlay() {
      clearInterval(this.timer)
      // console.log(1);
    },

点击小圆点切换图片

//传入当前索引，将currentIndex更改为index
 goPage(index) {
      this.currentIndex = index
    },

菜单栏

对其布局（结构可能不太好）

  <!-- 左侧菜单栏 -->
  <!-- categoryitemactive:鼠标经过的样式 category-item默认样式-->
  <!-- currentId当前选中菜单项的id索引 -->
    <ul class="site-list clearfix">
      <li
        :class="{ 'category-item': true, categoryitemactive: currentId == index ? true : false }"
        v-for="(item, index) in list"
        :key="item.id"
        @mouseover="showList(item.id)"
        @mouseleave="hideList()"
      >
        <a href="#" class="title">
          {{ item.msg }}
          <em class="iconfont-arrow-right-big">></em>
        </a>
      </li>
    </ul>
    <!-- //鼠标经过菜单栏显示内容 -->
    <div v-show="show" class="show" @mouseover="showDetail()" @mouseleave="hideDetail()">
      <h1 v-for="item in details" :key="item.id">{{ item.msg }}</h1>
    </div>

data数据

data() {
    return {
      list: [
        {
          id: 0,
          msg: '手机 电话卡',
        },
      ],
      //当前菜单栏对应显示数据的id
      currentId: 0,
      show: false,
      //左侧菜单栏背景颜色的class
      //categoryitem: 'category-item',
      // details:[]
    }
  },

鼠标经过菜单项时,传入id，将currentId设置为id，并将详情栏显示，详情栏数据设置为computed属性，根据currentId对数据进行筛选后返回，传入详情栏显示

    showList(id) {
      this.show = true
      this.currentId = id
      // console.log(id, this.currentId);
    },
    
    computed: {
       //鼠标经过菜单栏，存储对应数据
        details: function () {
          // console.log(this.currentId);
          return this.list.filter((item) => item.id == this.currentId)
        },
  },

鼠标离开隐藏

    hideList() {
      this.show = false
    },

详情栏显示与隐藏

    //鼠标经过显示
    showDetail() {
      this.show = true
    },
    //鼠标离开隐藏
    hideDetail() {
      this.show = false
      //清除菜单项选择样式
      this.currentId = undefined
    },