vue 防淘宝的放大镜效果和横向轮播

最新推荐文章于 2024-08-13 15:43:28 发布

施玥喵

最新推荐文章于 2024-08-13 15:43:28 发布

阅读量318

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/macangyewangs/article/details/120139987

版权

本文详细介绍了如何使用Vue.js实现淘宝式的商品放大镜效果以及横向轮播功能。在第一部分中，讲解了基本的实现步骤，并展示了实际效果。第二部分深入到项目实践中，通过JS和CSS的配合，进一步完善了功能，同样附带了最终的展示效果。

摘要由CSDN通过智能技术生成

第一部分（简单使用）

安装 cnpm install vue-piczoom --save
使用 vue-piczoom

<template>
  <div>
    <div class="box">
      <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item, index) in imagesList"
          :key="index"
          @mouseenter="changeImage(index)"
        >
          <img :src="item" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import PicZoom from "vue-piczoom";
export default {
  data() {
    return {
      // imgurl:'',
      imgurl: require("../../../assets/image/class10/my_imgbig1.png"),
      imagesList: [
        require("../../../assets/image/class10/my_imgbig1.png"),
        require("../../../assets/image/class10/my_imgbig2.png"),
        require("../../../assets/image/class10/my_imgbig3.png"),
      ],
    };
  },
  components: {
    PicZoom,
  },
  methods: {
    changeImage(index) {
      this.imgurl = this.imagesList[index];
    },
  },
};
</script>
<style scoped>
.box {
  width: 400px;
  height: 320px;
}
.list {
  width: 400px;
  height: 130px;
}
.list ul {
  width: 400px;
  display: flex;
  justify-content: space-around;
}
.list ul li {
  width: 120px;
  height: 90px;
  background-color: white;
  margin-top: 15px;
}
.list ul li img {
  width: 120px;
  height: 90px;
}
</style>

效果图