效果:
直接使用小程序的swiper组件就可以实现我们要的效果,但是我们注意swiper的高度问题,这是一个坑!
先贴上代码
<view class="swiper-box"> <swiper current="{{currentNum}}" bindchange='onChange' style='height:{{Hei}}' previousMargin="60rpx" nextMargin="60rpx"> <swiper-item> <image class="{{currentNum == 0 ? 'swiper-img-active':'swiper-img'}}" style="z-index:99" mode="widthFix" bindload='imgH' src=" https://mini-api.metamedical.cn/storage/images/1315496636616540160"></image> </swiper-item> <swiper-item > <image class="{{currentNum == 1 ? 'swiper-img-active':'swiper-img'}}" style="z-index:99" mode="widthFix" bindload='imgH' src=" https://mini-api.metamedical.cn/storage/images/1315496636616540160"></image> </swiper-item> <swiper-item > <image class="{{currentNum == 2 ? 'swiper-img-active':'swiper-img'}}" style="z-index:99" mode="widthFix" bindload='imgH' src=" https://mini-api.metamedical.cn/storage/images/1315496636616540160"></image> </swiper-item> </swiper> </view> const app = getApp() Page({ data: { currentNum:0 }, // 获取图片高度 imgH: function (e) { var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh = e.detail.height; //图片高度 var imgw = e.detail.width; var swiperH = winWid * imgh / imgw + "px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度 this.setData({ Hei: swiperH ,//设置高度 }) }, // 监听轮播 onChange(e) { this.setData({ currentNum: e.detail.current, }) }, }) swiper { height: 750rpx; display: flex; align-items: center; } .swiper-box { width: 100%; position: absolute; top: 180rpx; z-index: 9; } .swiper-img { width: 615rpx; height: 308rpx; border-radius: 20rpx; } .swiper-img-active { width: 615rpx; height: 420rpx; transform: scale(1.1); /*放大1.1倍*/ transition: all .10s; border-radius: 20rpx; }稍做修改直接就可以使用,希望能帮助到大家,由于工作原因,没有时间给大家更新技术,望大家理解!
有技术问题需要解决的,可以私聊我,很乐意为大家解决问题,
这是给大家准备的源码,需要源码的,私信小编留下邮箱。
