微信小程序swiper设置自适应高度,swiper-item高度设置为100%,小程序swiper的hight:100%无效,swiper自适应屏幕高度

想将小程序的swiper中的swiper-item,高度撑开到各种手机屏幕的100%高度,即自适应屏幕高度

如果wxss直接hight:100%是不行的

第一步:先将wxss中的整个page属性,设置为100%

page {
    height: 100%; 
}

这样做目的是让显示页面,固定成自适应的全屏,防止出现图片中的滚动条,(当然,如果你有整个页面滚动需求,可以不设置)
在这里插入图片描述
第二步:使用wx.getSystemInfoSync().windowHeight这个方法,获取屏幕的高度,在页面加载的时候就获取这个值

	 data: {
       hight:null, //高度参数
    },
	   /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var winHeight = wx.getSystemInfoSync().windowHeight //设置变量存放屏幕高度值
        console.log(winHeight) //打印屏幕高度
        this.setData({
            hight:winHeight //传递值
        })
    },

第三步:关键的一步,是将hight值放到样式里面style="height: {{hight}}px;",注意后面接的是px,不是rpx

    <swiper current='{{currentTab}}' vertical='{{true}}' style="height: {{hight}}px;" >
        <swiper-item id="0" catchtouchmove="false"  >
          。。。。。。。
        </swiper-item>
      </swiper> 
传递值前,黄色是swiper的背景色

在这里插入图片描述

设置高度后,黄色是swiper的背景色,swiper撑开到100%高度了

在这里插入图片描述

这样就能实时将swiper的高度,自适应填充到100%了

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
微信小程序swiper组件默认是根据图片的高度设置swiper高度的,所以如果要实现swiper高度自适应的效果,可以采用以下几种方式: 1. 使用image组件获取图片的高度:在swiper-item中使用image组件来展示图片,并设置mode为aspectFill,然后通过image组件的bindload事件获取到图片加载后的高度,并将该高度动态赋值给swiper组件的高度属性。例如: ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image> </swiper-item> </block> </swiper> ``` ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, getImageHeight: function(e) { const { index, height } = e.currentTarget.dataset; this.setData({ swiperHeight: height }); } }) ``` 2. 使用wx.createSelectorQuery获取图片高度:在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度,并将该高度动态赋值给swiper组件的高度属性。例如: ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, onLoad: function() { const query = wx.createSelectorQuery(); query.select('.swiper-item-image').boundingClientRect(res => { this.setData({ swiperHeight: res.height }); }).exec(); } }) ``` ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 以上两种方式都可以实现swiper高度自适应的效果,你可以根据自己的实际需求选择其中一种方法来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值