小程序调用swiper实现3d轮播

这里我们先来看看效果吧~
小程序调用swiper实现3d轮播
接着来讲讲怎么实现的
首先是页面的内容

    <swiper previous-margin='50px'  next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
        <swiper-item wx:for='{{imgList}}' wx:key=''>
            <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
        </swiper-item>
    </swiper>

（1） previous-margin 和 next-margin 表示前边距和后边距，官网文档有说明的。

（2） swiperChange 就是swiper的切换事件名

（3） style=‘height:{{swiperH}}’ 这是等比设置swiper高度，因为swiper有固定的高度，所以要动态修改一下。这篇文章也有类似的做法

（4） getHeight 是获取图片的宽高，然后再去设置高度这样才能让图片等比缩放

接着是样式

<style>
    swiper {
      padding-top: 30px;
    }
    .le-img {
      width: 100%;
      display: block;
      transform: scale(0.8);
      transition: all 0.3s ease;
      border-radius: 6px;
    }
    .le-img.le-active {
      transform: scale(1);
    }
    </style>

（1）最主要的就是scale这个属性了，有了这个属性才能有第二张图片缩放的效果。

然后就是关键的js啦

<script>
    data: {
        swiperH:'',//swiper高度
        nowIdx:0,//当前swiper索引
        imgList:[//图片列表
            "/public/img/idx-ad.png",
            "/public/img/idx-ad.png",
            "/public/img/idx-ad.png",
        ]
    },
    //获取swiper高度
    getHeight:function(e){
        var winWid = wx.getSystemInfoSync().windowWidth - 2*50;//获取当前屏幕的宽度
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;
        var sH = winWid * imgh / imgw + "px"
        this.setData({
            swiperH: sH//设置高度
        })
    },
    //swiper滑动事件
    swiperChange:function(e){
        this.setData({
            nowIdx: e.detail.current
        })
    },
    </script>

就这些简单的代码就完成啦 ^_

小程序调用swiper实现3d轮播

相关推荐