国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序之swiper輪播圖中的圖片自適應高度

stackfing / 1254人閱讀

摘要：小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是是固定死的高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應不同分辨率捏。我的思路是獲取屏幕寬度，獲取圖片的寬高，然后等比設置當前屏幕寬度下的高度。

小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應不同分辨率捏。

我的思路是：獲取屏幕寬度，獲取圖片的寬高，然后等比設置當前屏幕寬度下swiper的高度。

1.結構


      
        
               //bindload是綁定圖片加載的事件,記得給image加上mode=“widthFix”這個屬性哦，還有就是設置這個image 100%寬度喲

swiper的各個屬性在官方文檔中都有，這里就不說明了。最主要的是： style="height:{{Height}}" //動態設置swiper的高度

2.在page里面：

data: {
    imgUrls: [                   
        "../img/goodsDetail/goods.png",
        "../img/goodsDetail/goods.png",
        "../img/goodsDetail/goods.png"
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1300,
    bg: "#C79C77",
    Height:""          //這是swiper要動態設置的高度屬性
 },
imgHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth; //獲取當前屏幕的寬度
    var imgh=e.detail.height;//圖片高度
    var imgw=e.detail.width;//圖片寬度
    var swiperH=winWid*imgh/imgw + "px"http://等比設置swiper的高度。  即 屏幕寬度 / swiper高度 = 圖片寬度 / 圖片高度    ==》swiper高度 = 屏幕寬度 * 圖片高度 / 圖片寬度
    this.setData({
        Height:swiperH//設置高度
    })
},

總結：獲取當前屏幕寬度： wx.getSystemInfoSync().windowWidth
在小程序里動態設置屬性，只有通過setData（{ }）來設置，和js中直接操作css樣式有一點類似

注意：image如果外層有個容器裝，然后image設置width為100%之后，距離裝它的容器底部有一點距離，那是因為image是默認設置的display:inline-block屬性，這個屬性會產生間隙。如果要撐滿容器，設置為display:block就可以了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113121.html

相關文章

  • 微信小程序之swiper輪播圖中的圖片自適應高度

    摘要：小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是是固定死的高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應不同分辨率捏。我的思路是獲取屏幕寬度，獲取圖片的寬高，然后等比設置當前屏幕寬度下的高度。 小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應...

    WrBug 評論0 收藏0

  • 微信小程序之swiper輪播圖中的圖片自適應高度

    摘要：小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是是固定死的高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應不同分辨率捏。我的思路是獲取屏幕寬度，獲取圖片的寬高，然后等比設置當前屏幕寬度下的高度。 小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應...

    Winer 評論0 收藏0

  • 微信小程序之swiper輪播圖中的圖片自適應高度

    摘要：小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是是固定死的高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應不同分辨率捏。我的思路是獲取屏幕寬度，獲取圖片的寬高，然后等比設置當前屏幕寬度下的高度。 小程序中的輪播圖很簡單，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，這樣如果傳入的圖片大于這個高度就會被隱藏。辣么，怎樣讓圖片自適應...

    hatlonely 評論0 收藏0

  • 微信小程序之選項卡

    摘要：我們在函數中通過獲取設備的寬高來設置組件高度以及高度為導航欄的高度點擊導航欄切換內容點擊切換滑動內容切換導航欄滑動切換可滾動區域滾動最底刷新數據頁面上拉觸底事件的處理函數更新列表一個漂亮的選項卡就完成了完整案例 選項卡隨處可見，微信小程序中也不例外，下面來寫一個簡單的小程序選項卡 思路 之前寫過基于swiper的選項卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件...

    stormjun 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<