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;
    }
    个人项目记录,转载需标明出处,有问题可留言联系修改。
  • 相关阅读:
    移动端布局方案汇总&&原理解析
    Javascript运行机制
    git 使用
    async await详解
    vue使用axios调用豆瓣API跨域问题
    hash和history的区别
    http状态码
    XSS 和 CSRF简述及预防措施
    【pytorch】pytorch基础学习
    [源码解读] ResNet源码解读(pytorch)
  • 原文地址:https://www.cnblogs.com/sinceForever/p/13177816.html
Copyright © 2011-2022 走看看