可否将swiper的高度可以变得自适应?谢谢!

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

现在我用swiper做一些tab切换时,swiper的高度固定是150px,但是我的swiper-item里面内容的高度有时不止150px,我设置min-height是没有效果的,但是把swiper的高度设置为一个固定的死数据又不好,所以请官方能否让swiper 的高度变得可以自适应,谢谢!

10 回复
guiyinghou
guiyinghou1 楼6 年前

加style属性,给高度就是屏幕高度减去tab的高度

taomin
taomin2 楼6 年前

感谢反馈。这个问题考虑过,但目前我们暂无定论,原因主要是:如果可以自适应,那意味着很可能各个swiper-item的高度并不一致,要么留白要么有滚动条。你想要实现的效果是怎样的呢?

uguo
uguo3 楼6 年前

嗯嗯    之前试出来了   谢谢

jun57
jun574 楼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()  

},

tanjun
tanjun5 楼6 年前

这种交互很常见。办法是让swiper占满屏幕除tab外剩下的部分,swiper-item里面放纵向的scroll-view。

tli
tli6 楼6 年前

这样做tab切换 ,  几个切换页面的 内容 上下滚动式同步 的   ,这个怎么解决呢?谢谢。

vqian
vqian7 楼6 年前

你是怎么让swiper占满屏幕除tab外剩下的部分的呢?min-height:100%;没用啊

qianxiulan
qianxiulan8 楼6 年前

官方不支持,可以自己手写轮播图,view标签是支持自适应的

khao
khao9 楼6 年前

scroll-view的高度必须固定才能滚动,这个不能自动吗?

xiulanchang
xiulanchang10 楼5 年前

@LastLeaf,非常感谢指导