收藏
回答

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

问题模块
API和组件

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

回答关注问题邀请回答
收藏

11 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-07-28

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

    2017-07-28
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-07-28

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

    2017-07-28
    赞同
    回复
  • V2R
    V2R
    2018-07-30

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

    2018-07-30
    赞同
    回复
  • 王焯
    王焯
    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
    赞同
    回复
  • Sugar
    Sugar
    2017-11-02

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


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

    嗯嗯    之前试出来了   谢谢

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

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

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

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

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

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

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

    @LastLeaf,非常感谢指导

    2017-07-28
    赞同
    回复

正在加载...

登录 后发表内容