收藏
回答

swiper 如何自适应高度

问题模块
API和组件


  1. swiper 组件无法自适应高

  2. 内容是图片 图片的mode 设置了 widthFix 属性

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" style="width:100%" mode="widthFix"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration


最后一次编辑于  2017-08-23  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 猫咪🐱
    猫咪🐱
    2017-08-23

    .slide-image,swiper-item,swiper{

    width:100%;

    height:400rpx;

    }

    使用rpx


    2017-08-23
    赞同
    回复
  • 课博
    课博
    2018-05-08

    <  swiper wx:for='{{array}}'  style  =  'height:{{ heights[index] || 50 }}px'  >  

          <  swiper-item  >  

              <  view  class  =  'getThisHeight'  >  

                ...这里放自适应内容  

              </  view  >  

          </  swiper-item  >  

    </  swiper  >  


    justifyHeight:   function  () {  

          let  that =   this  

          let  hs = []  

        wx.createSelectorQuery().selectAll(  '.  getThisHeight  '  ).boundingClientRect(  function  (rects) {  

            rects.forEach((v, i) => {  

                hs[i] = v.height  

            })  

            that.setData({  

                heights: hs,  

            })  

        }).exec()  

    },


    2018-05-08
    赞同
    回复 1
    • 二四八月常晴偶雨
      二四八月常晴偶雨
      2018-06-08

      啊,找了半天swiper-item高度自适应的方法,你这个才是正解啊,太感谢了~~~

      2018-06-08
      回复