小程序圖片寬度自適應設置的方法
小程序中的輪播圖很簡單,官方都有例子的,但是唯一的缺陷就是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
聲明:本站所有文章資源內容,如無特殊說明或標注,均為采集網絡資源。如若內容侵犯了原著者的合法權益,可聯系站長刪除。