收藏
回答

”收钱吧福利“小程序的顶部导航栏效果怎么实现的?

效果:小程序内容区域的顶部轮播图可穿透顶部导航

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

5 个回答

  • 米花花
    米花花
    03-05

    我知道可以自定义:

    图一可实现:固定的背景已经可以实现

    图二应该怎么实现:导航栏的轮播背景图成了小程序顶部导航的背景,且上滑时顶部导航背景跟随轮播图变化

    03-05
    有用
    回复 5
    • Jhou旭
      Jhou旭
      03-05
      可以使用 onPageScroll()监听页面距离顶部的距离,从而改变颜色,至于颜色值怎么设置上去的话,可以定义一个关于颜色的状态,然后在页面设置style:="background: {{ 你设置的颜色状态名 }}"
      03-05
      回复
    • Jhou旭
      Jhou旭
      03-05回复Jhou旭
      ”导航栏的轮播背景图成了小程序顶部导航的背景“,这里的话你可以通过rgba颜色值或者8位的16进制色值设置透明度即可
      03-05
      回复
    • 米花花
      米花花
      03-05回复Jhou旭
      我明白了,初始设置顶部导航透明度为零,容器置顶就好了
      03-05
      回复
    • Jhou旭
      Jhou旭
      03-05
      对的
      03-05
      1
      回复
    • Jhou旭
      Jhou旭
      03-05
      还可以给导航添加一个过渡的时间,这样看起来颜色转换不至于这么生硬
      03-05
      回复
  • 正周
    正周
    03-05

    自定义导航栏。看文档

    03-05
    有用
    回复 1
    • 米花花
      米花花
      03-05
      刚发了图你再帮忙看看
      03-05
      回复
  • Hoooooo!
    Hoooooo!
    03-05

    navigationStyle 导航栏样式,仅支持以下值:

    default 默认样式

    custom 自定义导航栏,只保留右上角胶囊按钮。

    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

    使用自定义导航栏可以实现

    03-05
    有用
    回复 1
    • 米花花
      米花花
      03-05
      刚发了图你再帮忙看看
      03-05
      回复
  • Jhou旭
    Jhou旭
    03-05

    app.json 添加:

    "window": {
        "navigationStyle""custom"
      },
    



    文档链接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

    03-05
    有用
    回复 1
    • 米花花
      米花花
      03-05
      刚发了图你再帮忙看看
      03-05
      回复
  • Brother斌🎈
    Brother斌🎈
    03-05

    自定义导航栏:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

    03-05
    有用
    回复 1
    • 米花花
      米花花
      03-05
      刚发了图你再帮忙看看
      03-05
      回复
登录 后发表内容
问题标签