评论

微信小程序-自定义导航栏-免费开源

自定义导航栏组件,拿走即用

先看看效果吧。



两种状态(可在组件灵活配置)


1,在tabBar页面,统一显示在左边。(看上面图片)

2,在非tabBar页面,统一显示在中间。(看上面图片)


配置返回弹窗:(对物理按键无效


1,将需要返回弹窗的页面路径配置在returnWindow数组里面即可。


2,wxml页面,设置弹窗内容


引用:(需要开发版Nightily工具才能正常体验


  1. app.json全局配置"navigationStyle": "custom"。或者单个页面也行。
  2. app.json全局引入自定义组件和icon图标。需要引入weui。路径的话,自己看着办。app.json相对你组件的位置。


3,到页面wxml引用了,就一行代码。<navigation title="搜索"></navigation>



解释:


index即首页。

tabBarList中的页面即展示左边标题。不在的页面则展示左边菜单,中间标题。可到组件中灵活配置

returnWindow返回需要弹窗的页面数组。


样式方面:

使用的是cover-view+fixed定位


真实案例小程序:(问卷调查时间)


代码片段:

https://developers.weixin.qq.com/s/UA7X0emv7wes

最后一次编辑于  2020-04-28  
点赞 14
收藏
评论

7 个评论

  • 凡开亚
    凡开亚
    2019-12-27
    牛逼
    2019-12-27
    赞同 1
    回复
  • 小肥羊
    小肥羊
    2019-12-24
    先赞后看已成习惯
    2019-12-24
    赞同 1
    回复 2
    • 袁述~
      袁述~
      2019-12-24
      有BUG
      2019-12-24
      回复
    • 袁述~
      袁述~
      2019-12-27
      更新拉,小老妹
      2019-12-27
      回复
  • 一骑白马开吴疆®
    一骑白马开吴疆®
    2020-06-15

    单页底部弹出式可试试这个组件https://github.com/MakerGYT/mini-menu

    2020-06-15
    赞同
    回复
  • 独揽月下萤火~
    独揽月下萤火~
    2020-05-13

    大佬 🐂🍺

    2020-05-13
    赞同
    回复
  • 快乐大白
    快乐大白
    2020-04-03

    标题放左侧只能自定义吗?

    2020-04-03
    赞同
    回复 1
    • 袁述~
      袁述~
      2020-04-03
      有菜单栏,肯定是中间标题。没有菜单栏标题就在左边。
      2020-04-03
      回复
  • 波妞
    波妞
    2019-12-27

    为什么我打开什么也看不到哇

    2019-12-27
    赞同
    回复 3
  • Warwick🇨🇳
    Warwick🇨🇳
    2019-12-26

    🐂🍺

    2019-12-26
    赞同
    回复
登录 后发表内容