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

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

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

先看下view层是什么样的

<view class="zh-carousel" style="margin-top: {{carouselMarginTop}}rpx"><swiper indicator-dots="true" autoplay="true" interval="4000" duration="500" class="zh-swiper" style="height: {{carouselHeight}}px"><swiper-item class="zh-swiper-item" wx:for="{{carouselList}}" wx:key="index"><image src="{{ item.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/

微信小程序轮播图高度自适应相关推荐

微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
微信小程序轮播图高度的swiper设置
假如原图的宽度和高度 1125*352 height: calc (100vw*352/1125)
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
小程序轮播图高度适配
小程序轮播图适配在开发小程序轮播图时,我遇到一下问题:小程序轮播图的导航栏总是不能放在正确的位置上,思考再三,我发现问题的原因是:当我们设置image的mode="widthFix&quo ...
微信小程序轮播图的实现
在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用 swiper这个标签来实现的,我们在微信小程序文档中可以 ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...

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

微信小程序轮播图高度自适应相关推荐

最新文章

热门文章