收藏
回答

小程序如何做出吸顶tab加左右滑动切换tab的效果?

希望做出像大众点评首页一样的效果,点击tab文字“推荐”、“附近”可以切换tab,左右滑动也能切换tab,同时在页面往下的时候“推荐”、“附近”的tab按钮能固定在顶部不出去

参考 https://blog.csdn.net/jian_xi/article/details/77600139 做出了左右滑动tab的效果,但swiper必须指定高度,就没法结合position:sticky在tab上方有内容时做出tab吸顶的效果

小程序有办法实现吗?

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

2 个回答

  • āáǎà
    āáǎà
    07-11

    这个貌似很简单,swiper的高度可以通过 获取设备的高度 减掉 tab 的高度 就完事了

    我感觉就是这样子操作哈哈哈哈

    注:

    1、tab的高度 需通过 获取dom节点信息api来获取准确的高度信息

    2、屏幕高度的信息可以通过获取设备信息的api来获取

    07-11
    有用
    回复
  • 跨商通
    跨商通
    03-29

    大概能猜出你们卡在哪了。

    swiper是可以自适应高度的,用flex:1可以影响。请参考:

    https://developers.weixin.qq.com/community/develop/article/doc/00006c73684e7857aceb6624251813

    然后你就用这个组件:

    https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/tabs.html

    03-29
    有用
    回复 6
    • Y
      Y
      03-29
      试了一下并不行啊?swiper还是150px固定高度不会根据内容自适应
      03-29
      回复
    • 跨商通
      跨商通
      03-29回复Y
      上代码吧。
      03-29
      回复
    • Y
      Y
      03-29回复跨商通
      就是按你给出的代码写的一样的,js和wxss是空的,wxml是这样,无法显示完整,调试器看到swiper的高度是150
      03-29
      回复
    • 跨商通
      跨商通
      03-29回复Y
      在app.wxss里加上这句吧。
      03-29
      回复
    • 跨商通
      跨商通
      03-29回复Y
      03-29
      回复
    查看更多(1)
登录 后发表内容
问题标签