微信小程序之swiper轮播图中的图片自适应高度

hatlonely 发布于2019-06-28 18:47 / 1417人阅读

摘要：小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是是固定死的高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下的高度。

小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是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"//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
        Height:swiperH//设置高度
    })
},

总结：获取当前屏幕宽度： wx.getSystemInfoSync().windowWidth
在小程序里动态设置属性，只有通过setData（{ }）来设置，和js中直接操作css样式有一点类似

注意：image如果外层有个容器装，然后image设置width为100%之后，距离装它的容器底部有一点距离，那是因为image是默认设置的display:inline-block属性，这个属性会产生间隙。如果要撑满容器，设置为display:block就可以了。

GPU云服务器云服务器 js图片自适应轮播高度自适应 textarea自适应高度 iframe高度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28661.html

微信小程序之swiper轮播图中的图片自适应高度

摘要：小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是是固定死的高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下的高度。小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应...

WrBug 2019-08-22 16:37 评论0 收藏0
微信小程序之swiper轮播图中的图片自适应高度

摘要：小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是是固定死的高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下的高度。小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应...

stackfing 2019-08-29 15:08 评论0 收藏0
微信小程序之swiper轮播图中的图片自适应高度

摘要：小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是是固定死的高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。我的思路是获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下的高度。小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应...

Winer 2019-08-02 10:15 评论0 收藏0
微信小程序之选项卡

摘要：我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡思路之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件...

stormjun 2019-08-23 11:49 评论0 收藏0