公告列表
公告列表
收藏
回答

如何实现类似小米Lite商城小程序中的首页这种高度自动的swiper功能？

从外观和操作上看，是使用scroll-view做为TAB标题，下面是一个swiper。

看上去普普通通，但是他厉害就厉害在这里的swiper高度是自适应的。

有没有大佬研究过这个是怎么实现的吗？可否分享下经验？

PS：固定swiper高度为父级元素高度的100%，这个方案看起来可以，但是会出现两个滚动条，不友好！

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

3 个回答

  • 老张
    老张
    2021-09-28

    swiper可以高度自适应。

    在一个flex的父级里，将自己设为flex:1，就可以。

    2021-09-28
    有用
    回复 1
    • momo
      momo
      2021-09-29
      我测试了看到还是不是自适应高度，有一个最大高度值，应该是150px，瀑布流不是重点！
      2021-09-29
      赞
      回复
  • Listen
    Listen
    2021-09-28

    上边的分类是scroll-view

    下边用swiper里边嵌套waterfall

    高度是自适应是 waterfall加载完数据不断的去修改swiper的高度

    2021-09-28
    有用
    回复 1
    • momo
      momo
      2021-09-29
      你说的这个方案我尝试下看看
      2021-09-29
      赞
      回复
  • Ðμαi、
    Ðμαi、
    2021-09-28

    可以看看这个，瀑布流效果，但没有用到swiper

    https://developers.weixin.qq.com/community/develop/article/doc/000a2e9db9ca98a3c379cfa4a5d013

    2021-09-28
    有用
    回复 1
    • momo
      momo
      2021-09-29
      瀑布流这个好解决，关键他这个Tab做得非常完美，不知道怎么实现的，但我觉得他的切换可能还是用了swiper的！
      2021-09-29
      赞
      回复
请 登录 后发表内容
相关问题
相关文档