当前博客:自制常用UI-自定义导航栏

180 次浏览【转载需注明来源】


原生导航栏不好看是吧,我也觉得,今天咱给他扔了,自己写,爱整啥样整啥样

 

首先,关掉它!

点击页面配置.ljs

在页面效果中加入一行代码,  "@页面_导航栏样式":"@导航_取消原生导航栏"

[
	{
		"@页面_路径": "@代码_index.lhtml",
		"@页面_效果": {
			"@页面_导航栏标题": "主页",
			"@页面_导航标题及状态栏颜色": "@颜色值_黑色",
			"@页面_导航栏样式":"@导航_取消原生导航栏"
		}
	}
]
Markup

这样顶部那丑玩意就拜拜了.

 

页面部分:

<页面>
	<区块>
	     <区块 类名="自定义导航栏">
	         <区块 类名="左边按钮">&lt;返回</区块>
	         <区块 类名="标题">自定义导航栏</区块>
	         <区块 类名="右边按钮">▼</区块>
	     </区块>
	</区块>
</页面>
Markup

我为了快点薅利快云的羊毛就不做那么好看了,大家自由发挥.

 

样式部分:

<样式>
    .自定义导航栏{
        显示模式: 弹性布局;
        宽度: 94%;
        内边距:0 3%;
        高度: 80rpx;
        背景-颜色: 颜色值-橙色;
        内容对齐: 两极间隔;
        字体-粗细: 粗体;
         行高: 80rpx;
    }
</样式>
Markup

这里注意,想做的好看,把这个弹性布局研究明白先

 

看看咱这个

 想看啥UI,别客气,跟我说

自制常用UI-自定义导航栏