评论

微信小程序swiper高度动态适配(子元素高度不固定)

微信小程序swiper高度动态适配(子元素高度不固定)


示例代码地址  https://github.com/s568774056/swipe.git


对于整页都是swiper的情况下。例如下面这张图:

则可以使用如下css


swiper,swiper-item{

   height: 100vh !important;

}


或者


swiper,swiper-item{

 height: calc(100vh - 75rpx) !important;

}





对于swiper占据部分高度的情况下。

使用如下代码

原理为在swiper-item的最上面和最下面插入空view,并利用wx api获取两个之间的高度差,然后设置给swiper。   细节方面需要自己调整下。为什么小程序不把这个组件做好呢?还得自己计算- -!

<swiper class='hide' bindanimationfinish="swiperChange" style="height:{{swiper_height}};" current="{{isIndex}}">

 <swiper-item wx:for="{{roomList}}" wx:for-item='room' wx:for-index="index">

   <view id="start{{index}}" class='start-view'></view>

   <block wx:for="{{imgUrls}}" wx:for-item='path' wx:for-index="img-index">

     <image mode="aspectFill" src="{{path}}" />

   </block>

   <view id="end{{index}}" class='start-view'></view>

 </swiper-item>

</swiper>


swiper {

 margin-top: 45rpx;

}


Page({

 data: {

   roomList: ['Room1', 'Room2', 'Room3'],

   imgUrls: [

     'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',

     'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',

     'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'

   ],

   swiper_height: 0,

   isIndex:0

 },

 onLoad: function () {

   this.autoHeight();

 },

 changeNavBar: function (e) {

   this.setData({

     isIndex: e.detail

   });

 },

 swiperChange: function (e) {

   this.setData({

     isIndex: e.detail.current

   });

   this.autoHeight();

 },

 autoHeight() {

   let {

     isIndex

   } = this.data;

     wx.createSelectorQuery()

       .select('#end' + isIndex).boundingClientRect()

       .select('#start' + isIndex).boundingClientRect().exec(rect => {

         let _space = rect[0].top - rect[1].top;

         _space =  _space + 'px';

         this.setData({

           swiper_height: _space

         });

       })

 }

})






参考文章https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04

最后一次编辑于  2019-09-04  
点赞 7
收藏
评论

7 个评论

  • 没有名字
    没有名字
    2019-05-10

    https://developers.weixin.qq.com/s/ylShYBma7f5J     官方自带 的一个小例子

    2019-05-10
    赞同 1
    回复 1
    • 寻界
      寻界
      2019-05-10

      。。。我是用swiper做左右滑动加分页的,为了不增加示例代码的复杂度,没有放分页和navbar的控制代码。默认的swiper高度是150px,超出150px的元素会被遮挡,不满足需求的。如果用scroll的话同样需要给scroll指定高度。

      2019-05-10
      回复
  • Peter👊
    Peter👊
    2020-04-08

    我一个项目里面遇到两个地方这种问题,一个地方通过给每个子item一个唯一id获取子元素高度,动态赋值高度,还有个地方更惨,子元素是动态的,动态的就算了,还没有高度,也是需要自己去赋值高度的,就子元素是rich-text,这可怎么玩 啊?

    2020-04-08
    赞同
    回复
  • 宋玉
    宋玉
    2019-10-17
    .swiper-item {
    height: auto !important;

    }

    2019-10-17
    赞同
    回复
  • Capricorn
    Capricorn
    2019-07-10

    请问一下博主,我也是按照您的方法写的,但是获取到的高度不是实际高度只是页面的高度,是因为我swiper-item里面是用wx:for进行的循环吗,可是如果我使用定时器也是不管用的

    以下要点我全部都实现,麻烦博主帮忙看一眼,公司催的急网上的办法都不好用。。

    page和height:100%

    在swiper-item的上下分别设置一个view给他一个id,在onload和changeswiper的时候进行高度的计算。。

    2019-07-10
    赞同
    回复 1
    • 寻界
      寻界
      2019-08-27
      不好意思哈,几个月没登录,没看到,文章我重新编辑了下。你后来怎么解决的啊?
      2019-08-27
      回复
  • Administrator
    Administrator
    2019-05-13

    直接用vh不就好了????

    2019-05-13
    赞同
    回复 4
    • 寻界
      寻界
      2019-05-13

      vh和height100%不一样吗?设置这个无效果的。

      2019-05-13
      回复
    • Administrator
      Administrator
      2019-05-13回复寻界

      vh 就是将你的屏幕高度分成100份!

      100%这个属性值可以理解为一个计算属性!它是需要有一个基准值!而这个基准值就是其父级元素的高度值!

      2019-05-13
      回复
    • Administrator
      Administrator
      2019-05-13回复寻界

       也可以这么理解:height 100依赖父元素,100vh直接视口高度


      2019-05-13
      回复
    • 寻界
      寻界
      2019-05-13回复Administrator

      100vh是可以解决一些问题,但像我这个就不能设置为100vh了。图片里的样式不对是因为组件样式覆盖在模拟器上没效果

      2019-05-13
      回复
  • 
    
    2019-05-09

    你好,能帮我看看这个问题吗,谢谢

    https://developers.weixin.qq.com/community/develop/doc/000ac65d3900308f218883b5e5bc00

    2019-05-09
    赞同
    回复
  • 萌
    2019-05-09

    用scroll-view就不用计算了吧,没试过,仅供参考

    2019-05-09
    赞同
    回复 4
    • 寻界
      寻界
      2019-05-09

      因为不想用scroll-view呢

      2019-05-09
      回复
    • 萌
      2019-05-09回复寻界

       嗯,那就只能计算高度了,我用swiper做过左右翻页得小程序,用楼主得方法是最简单得拉,谢谢你得分享

      2019-05-09
      回复
    • 寻界
      寻界
      2019-05-09回复

      不客气哦

      2019-05-09
      回复
    • 寻界
      寻界
      2019-08-27回复
      今天试了下swiper嵌套scroll-view会造成有两个滚动条,使用很不友好。如果屏幕里只有一个swiper的话是可以嵌套scroll-view,有其他容器的话还是使用我这个方法比较好
      2019-08-27
      回复
登录 后发表内容