仿淘宝-商品详情点击小图展示大图


  data() {
    return {
      imgUrl: [
        { index:1, url: require('../assets/img/help/help1.png') },
        { index:2, url: require('../assets/img/help/help2.png') },
        { index:3, url: require('../assets/img/help/help3.png') },
      ],
      //大图片默认显示第一张
      ImgUrl:require('../assets/img/help/help1.png')
    };
  },
  methods: {
    //点击小图片时将图片路径赋值给大图
    getIndex(imgUrl) {
      this.ImgUrl = imgUrl;
    }
  },

试过了,完全就是我要的效果
参考:https://www.cnblogs.com/woniu666/p/13304410.html?utm_source=tuicool

你可能感兴趣的:(仿淘宝-商品详情点击小图展示大图)