微信輪播圖自適應高度
原理: 原圖寬/原圖高 = 螢幕寬/適應螢幕寬後的圖片高
wxml
<swiper style="height:{{imgh==0?200:imgh}}" indicator-dots="{{indicatorDots}}" autoplay="true" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{圖片陣列***》》此處替換}}" wx:key="*this">
<swiper-item>
<image bindload="imageload2" style="height:{{imgh==0?200:imgh}}" bindtap="toApplyBrand" src="{{URL圖片路徑》》》*此處替換}}"></image>
</swiper-item>
</block>
</swiper>
JS
Page({
data: {
imgh:'',
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
},
imageload2: function (e) {//獲取圖的高度
let swiperHeight = this.data.imgh;
let imgWidth = e.detail.width; //獲取圖片原始寬度
let imgHeight = e.detail.height; //圖片原始高度
var width = wx.getSystemInfoSync().windowWidth;
//獲取可使用視窗寬度
console.log('可用視窗 高度-->',width);
swiperHeight = width * imgHeight / imgWidth ;
console.log("swiperHeight", swiperHeight)
this.setData({
imgh: swiperHeight+'px'
})
},
})
相關文章
- 微信小程式之swiper輪播圖中的圖片自適應高度微信小程式
- Flutter實現馬蜂窩小紅書自適應高度輪播圖Flutter
- 微信小程式Swiper高度自適應微信小程式
- 微信小程式------輪播圖------縱向輪播圖微信小程式
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- 微信小程式swiper輪播圖卡死來回瘋狂輪播微信小程式
- textarea 高度自適應
- 微信小程式功能-----基礎輪播圖配置微信小程式
- html iframe高度自適應HTML
- textarea文域高度自適應
- textarea高度自適應詳解
- 小程式Swiper高度自適應
- iframe 跨域高度自適應跨域
- jQuery textarea框高度自適應jQuery
- 微信小程式實現類3D輪播圖微信小程式3D
- 微信小程式技術點 -- 3D輪播圖微信小程式3D
- iframe自適應高度的外掛
- Widget小元件如何自適應高度元件
- CSS 圖片固定長寬比實現高度自適應CSS
- 自動載入的iframe高度自適應
- 微信小程式 – 富文字圖片寬度自適應(正則)微信小程式
- textarea實現高度自適應的理解
- 巢狀UITextView的UITableViewCell高度自適應巢狀UITextView
- easyui-layout佈局高度自適應UI
- jQuery輪播圖之上下輪播jQuery
- 輪播圖
- iOS 精準獲取webView內容高度並自適應高度iOSWebView
- 真正解決iframe高度自適應問題
- React Native踩坑指南:WebView高度自適應React NativeWebView
- 小程式輪播圖應用——技巧篇
- Flutter輪播圖Flutter
- vue輪播圖Vue
- 圖片自適應
- UITableViewCell含有WebView的自適應高度新解決方案UIWebView
- textarea文字框高度自適應程式碼例項
- 短視訊系統原始碼,上傳圖片自適應拉伸符合高度原始碼
- js 輪播圖 (原生)JS
- 好程式設計師web前端分享高度自適應程式設計師Web前端