【小程序】微信小程序轮播图高度自适应

图片自适应在网站上是内置好的，只需要设置宽度即可，但在微信小程序非要做一个封装，高度不是随宽度自适应，真是操蛋，不过谁叫在人家的平台的搞呢，还是不得不屈服于小马哥的淫威啊。。

在微信小程序上实现图片自适应需要配合javascript脚本，也就是需要动态计算才能实现，具体修改如下：

先看下view层是什么样的

<view class="zh-carousel">
<swiper indicator-dots="true" autoplay="true" interval="4000" duration="500" class="zh-swiper">
<swiper-item class="zh-swiper-item" wx:for="{{carouselList}}" wx:key="index">
<image mode="widthFix" bindload="adaptCarouselHeight"></image>
</swiper-item>
</swiper>
</view>

因为设置了导航样式为自定义，所以需要给轮播图加个margin-top值 ，不然会被小程序功能按钮遮挡

{
"usingComponents": {},
"navigationStyle": "custom"
}

【小程序】微信小程序轮播图高度自适应

下面看下数据是如何计算的（注释很详细），如果不想细看的话，直接对着撸就行了

Page({
data: {
list: [],
carouselList: [
{image: '../../images/img-wx-gzh.png'},
],
carouselMarginTop: 0, // 这两个初始值必须要设置
carouselHeight: 0
},
onLoad: function() {
this.adaptCarouselMarginTop(); // 适配轮播图外间距
},
// 适配轮播图外间距
adaptCarouselMarginTop() {
let systemInfo = wx.getSystemInfoSync(),
pxToRpxScale = 750 / systemInfo.windowWidth, // px转换到rpx的比例
ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale, // 状态栏高度
navigationHeight = 44 * pxToRpxScale; // 导航高度，44是大概估值
this.setData({
carouselMarginTop: navigationHeight + ktxStatusHeight + 10 // 10是一个预估值，可根据呈现效果修改
});
},
// 适应轮播图高度
adaptCarouselHeight(e) {
let imgWidth = e.detail.width, // 原图宽高
imgHeight = e.detail.height,
screenWidth = wx.getSystemInfoSync().screenWidth; // 手机屏幕宽度
let ratio = (screenWidth - screenWidth/750*60) / imgWidth;
this.setData({
carouselHeight: imgHeight * ratio
});
}
}

欢迎关注：https://www.fenxianglu.cn/

以上是 【小程序】微信小程序轮播图高度自适应 的全部内容， 来源链接： utcz.com/a/101156.html

回到顶部