图片数据是从后台获取的,怎样实现点击小图上面出现大图?

是梨子啊
  • 25

如图:

小图的图片是后台获取到的数据,怎样才能点击小图时将小图的路径赋值给大图,让它切换。

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="smallimg[0].img" alt="" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img)"
              >
                <img :src="item.img" alt="" class="left_img" />
              </li>
            </ul>
</div>
回复
阅读 676
3 个回答

把大图引用图片的索引用变量currentIndex代替(而不是始终为0):

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="smallimg[currentIndex].img" alt="" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img, index)"
              >
                <img :src="item.img" alt="" class="left_img" />
              </li>
            </ul>
</div>

然后script 这么写:

{
    data(){
        return {
            // ...
            currentIndex: 0
        }
    },

    methods: {
        getBigImg(img, index){
            // ...
            this.currentIndex = index;
        }
    }
}

不过看你的图片都是smallimg[].img,如果大小图的URL不一样的话需要增加一个大图专属的字段(而不是用.img)。

类似这样

<div class="parameter_left">
            //大图
            <div class="parameter_left_bigimg" >
              <img :src="bigImgSrc" alt="" />
            </div>
            //小图
            <ul class="parameter_left_smallimg">
              <li
                
                v-for="(item, index) in smallimg"
                :key="index"
                @click="getBigImg(item.img)"
              >
                <img :src="item.img" alt="" class="left_img" @click="bigImgSrc = item.img "/>
              </li>
            </ul>
</div>

bigImgSrc的初始化的话,就是smallimg被赋值后,顺便把[0].img赋值给bigImgSrc

上诉描述的两种方案都是基于显示的是线上资源的情况下,如果楼主使用的是本地资源下的路径,应该要采取require的形式。

宣传栏