收藏
回答

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

问题模块
API和组件

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

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

11 个回答

  • LastLeaf
    LastLeaf
    2017-07-28

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

    2017-07-28
    赞同
    回复
  • George Zhang
    George Zhang
    2017-07-28

    @LastLeaf ,实现如图类似的tab切换,    用swiper做tab的一个好处是除了点击上面的选项卡可以切换,还可以滑动下面的swiper-item进行切换,现在比如我的swiper-item里面的高度不固定,而swiper的高度不能自适应就会造成一定的影响,比如我的内容由于swiper的高度较小只能显示一部分。


    我现在的解决方案是: 将swiper的高度设置一定的高度,然后给swiper-item设置overflow:scroll就可以实现自适应的效果(swiper-item的内容可以上下滚动展示),但是有一个bug就是你说的,如果和另一个选项卡的内容高度不一样,另一个选项卡就会有竖项的滚动条。


    如果这个bug暂时不能解决,对于这种tab切换,我即想点击上面的选项卡进行切换,也想滑动下面的内容进行切换,这种该用什么好的方法解决呢? 谢谢@LastLeaf



    2017-07-28
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-07-28

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

    2017-07-28
    赞同
    回复
  • George Zhang
    George Zhang
    2017-07-28

    @LastLeaf,非常感谢指导

    2017-07-28
    赞同
    回复
  • Sugar
    Sugar
    2017-08-23

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

    2017-08-23
    赞同
    回复
  • George Zhang
    George Zhang
    2017-08-23

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

    2017-08-23
    赞同
    回复
  • 友友✨
    友友✨
    2017-10-10

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

    2017-10-10
    赞同
    回复
  • Sugar
    Sugar
    2017-10-10

    嗯嗯    之前试出来了   谢谢

    2017-10-10
    赞同
    回复
  • Sugar
    Sugar
    2017-11-02

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


    2017-11-02
    赞同
    回复
  • 课博
    课博
    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
    赞同
    回复