zoukankan      html  css  js  c++  java
  • 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;
    }
    个人项目记录,转载需标明出处,有问题可留言联系修改。
  • 相关阅读:
    前端各类网站
    冒泡排序(Bubble Sort)
    实现标签名右对齐,文本框左对齐
    html5新增标签
    Javascript--this--学习笔记
    Javascript原型学习笔记
    Javascript作用域学习笔记
    python嵌入到C++的一些理解
    python入门最佳实践
    ActionBar的一些理解
  • 原文地址:https://www.cnblogs.com/sinceForever/p/13177816.html
Copyright © 2011-2022 走看看