WXOPEN Club

swiper 如何自适应高度

发布于 6 年前作者 jie2014053 次浏览最后编辑 6 年前来自 ask

  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
2 回复
xia21
xia211 楼6 年前

<  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()  

},

vcai
vcai2 楼4 年前

.slide-image,swiper-item,swiper{

width:100%;

height:400rpx;

}

使用rpx