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;
}

 

個人項目記錄，轉載需標明出處，有問題可留言聯系修改。