uni app 手机端导航栏自定义

第一步：明确顶部导航栏的构成（手机自带的顶部菜单+开发的顶部菜单栏）

获取手机自带的顶部导航栏

<view class="navigation_bar" > <!-- 这里是顶部导航栏 -->
</view>
<style lang="less">
.navigation_bar {height: var(--status-bar-height);  // 获取手机顶部导航栏width: 100%;  background-color: #808fb1;
}

然后是自定义项目内的导航栏
uni app自带狗都不用（bushi）；下载插件：https://ext.dcloud.net.cn/plugin?id=52（直接下载到uni app你的项目里面），不需要任何引入，直接用

<view class="navigation_bar" ><!-- 这里是顶部导航栏 --></view><view><uni-nav-bar class="tabs" left-icon="arrowleft" title="标题" @clickLeft="back" /></view><script>export default {components: {},data() {return {}}}</script><style lang="less">.navigation_bar {height: var(--status-bar-height);width: 100%;background-color: #808fb1;}
</style>

这样就行了，剩下的关于顶部导航栏样式的问题，可以直接看文档，个人适用，其他建议可留言

uni app 手机端导航栏自定义相关推荐

钉钉微应用手机端导航栏配置
一.设置导航栏颜色在url后面拼接dd_nav_bgcolor参数即可,如下: 支持的格式:"AARRGGBB" http://abc.xyz?dd_nav_bgcolor=FF ...
手机端导航栏html自适应,js+css3电脑手机端自适应响应式导航菜单代码
JS代码 function addListener(element, type, callback) { if (element.addEventListener) { element.addEven ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
css + HTML 实现京东app左右拖动导航栏
css + HTML 实现京东app左右拖动导航栏也可实现图片左右拖动(原理一样的) 京东app左右拖动导航栏效果: 图片左右拖动效果: 只写导航栏如下,因为图片原理一样只需css定义两个盒子模型 ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
5套独立的app手机端模板界面代码
MobioKit是移动手机端HTML模板,可以很容易创建手机网站布局设计,或者移动App应用.创意设计和神奇的特性将在让你完美的移动项目独一无二的.这个移动端UI工具包包含所有必要的设计,可以创建移动 ...
Android M App 永久隐藏导航栏的Solution
做项目,客户要求在App 中隐藏导航栏.这个比较简单,网上资料一大把. 现做下笔记. Android 隐藏导航栏, 有好几种办法: 1)修改系统级代码,使系统具有隐藏导航栏的功能: 这种实现方法可以参 ...
蚂蚁分类信息后台添加手机端导航项出现空白行解决方法
多城市版,有群友反应有BUG,添加手机端导航项会出现空白项,也无法删除. 分享一份修复的源文件下载替换. 替换文件路径:/admin/mobile.php mobile.rar

uni app 手机端导航栏自定义

uni app 手机端导航栏自定义

第一步：明确顶部导航栏的构成（手机自带的顶部菜单+开发的顶部菜单栏）

uni app 手机端导航栏自定义相关推荐

最新文章

热门文章