上效果图

话不多说——————上代码

首先wxml

<swiper class="con_img"  style="height:{{swiperheight}}px"  indicator-dots="true" autoplay="true" indicator-active-color="#f8e112" bindchange="changeheight"><block wx:for="{{swiper_img}}"><swiper-item><image src="{{item.img}}"  bindload='goheight' mode="widthFix"></image></swiper-item></block></swiper>

bindload='goheight' 写goheight函数在加载图片的时候计算出图片的高度

bindchange="changeheight" 写changeheight函数在更换图片时改变swiper的高度

js部分代码


计算图片自适应高度
goheight:function (e) {const { height } = this.data;var width = wx.getSystemInfoSync().windowWidth//获取可使用窗口宽度var imgheight = e.detail.height//获取图片实际高度var imgwidth = e.detail.width//获取图片实际宽度var he = width * imgheight / imgwidth//计算等比swiper高度height.push(he)
将计算出来的高度记录在数组height数组中this.setData({swiperheight:this.data.height[0]})
//先执行一次更换swiper高度的代码，因为changeheight函数第一张轮播图出来时不会触发},改变swiper高度changeheight:function(e){this.setData({swiperheight:this.data.height[e.detail.current]
取出height中对应的高度，赋值给swiperheight})},

微信小程序实现轮播图根据图片大小自适应高度相关推荐

php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序的轮播图+视频+图片（swiper）
项目简介:一个商城小程序需求场景:在首页加一个轮播图,轮播图包含多个视频和多张图片,视频播放,图片页面跳转页面实现技术:swiper 思路(一):刚开始写的时候,用的是将video直接嵌套在swi ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
微信小程序--顶部轮播图
效果图市面是手机尺寸有很多,那如何让我们的轮播图根据手机来进行自适应呢? 常见的手机尺寸: wxml <view><swiper indicator-dots='true' mod ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...
微信小程序3D轮播图实现
好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于 ...

微信小程序实现轮播图根据图片大小自适应高度

上效果图

首先wxml

bindload='goheight' 写goheight函数在加载图片的时候计算出图片的高度

bindchange="changeheight" 写changeheight函数在更换图片时改变swiper的高度

js部分代码

微信小程序实现轮播图根据图片大小自适应高度相关推荐

最新文章

热门文章