小程序图片宽度自适应设置的方法
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。
我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度。
1.结构
- <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Hei}}'>
- <block wx:for="{{imgUrls}}">
- <swiper-item>
- <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgH'/> //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个image 100%宽度哟
- </swiper-item>
- </block>
- </swiper>
swiper的各个属性在官方文档中都有,这里就不说明了。最主要的是: style='height:{{Hei}}' //动态设置swiper的高度
2.在page里面:
- data: {
- imgUrls: [
- '../../public/img/goodsDetail/goods.png',
- '../../public/img/goodsDetail/goods.png',
- '../../public/img/goodsDetail/goods.png'
- ],
- indicatorDots: true,
- autoplay: true,
- interval: 5000,
- duration: 1300,
- bg: '#C79C77',
- Hei:"" //这是swiper要动态设置的高度属性
- },
- 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 //设置高度
- })
- },
如果您的问题还未解决可以联系站长付费协助。

有问题可以加入技术QQ群一起交流学习
本站vip会员 请加入无忧模板网 VIP群(50604020) PS:加入时备注用户名或昵称
普通注册会员或访客 请加入无忧模板网 技术交流群(50604130)
客服微信号:15898888535
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若内容侵犯了原著者的合法权益,可联系站长删除。