vant+vue中实现用户图像重叠

vant+vue中实现用户图像重叠

1，vant中实现用户图像重叠，第一张在最上面，一次类推。方法如下

<div>
        <div class="header-con">
            <van-image 
                v-for="item in headImgs" 
                :key="item.id" :src="item.img"
                :style="{zIndex: 1000-item.id, position: 'absolute', left: (item.id * 5 - 5) + 'px' }">
            </van-image>
        </div>
        <div :style="{paddingLeft: headImgs.length * 5 + 15  + 'px'}">11w人已转发</div>
  </div>

 

headImgs是data里面定义的数组变量，

data(){
    return {
        headImgs: [
            {
                id: '1',
                img: require("../../../assets/cmsImage/headImg.png"),
            },
            {
                id: '2',
                img: require("../../../assets/cmsImage/headImg2.png"),
            },
            {
                id: '3',
                img: require("../../../assets/cmsImage/headImg.png"),
            },
            {
                id: '4',
                img: require("../../../assets/cmsImage/headImg2.png"),
            }
        ],
    }
}

 

.header-con {
  position: relative;
}

 

2，vant中实现用户图像重叠，第一张在最下面，一次类推。方法如下: 这种就不需要使用绝对定位相对定位了，后面那句转发信息位置也不需要动态后挪。

.header-con >>> .van-image {
    margin-right: -10px !important;
}

 

个人项目记录，转载需标明出处，有问题可留言联系修改。