【小程序】自定义导航栏
这个需求要不是UI和我讲有其他小程序实现了,我都还以为小程序还不能做到自定义导航。还好是在设计阶段给出的需求,不然。。。
先看看效果吧
微信小程序自定义导航栏
开始接介绍用法:
1:配置app.json
什么都别管,先查看文档json配置
然后在app.json
设置navigationStyle
为custom
(自定义导航栏)
注意!: 如果这里设置为自定义导航,那么所有页面都会变成自定义导航;想在其他页面的.json文件配置自定义导航是没用的,所以后面需要用到template模板
或者component组件
2:了解下原导航在各个手机型号的高度(适配)
导航栏高度
wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息
screenHeight - windowHeight 计算标题栏高度
标题栏高度:
‘iPhone’: 64,
‘iPhone X’: 88,
‘android’: 68
小程序部分真机设备信息采集 (下图是网上转载而来)
3:编写component或者template
这里app.json配置影响的全局配置,所以其他页面都成了自定义导航,只有写一个公共组件或者模板套用了(随你挑选一个),这里我选择component构造器。
Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
JSON
一开始就贴出JSON,是为了提醒某些忘记配置json得人(为啥没效果!什么鬼东西!垃圾组件!cao):
创建component,先在json(component.json)配置好component
使用component,先在json(要使用的wxml.json)配置component的名称和引用路径
{"component": true,"usingComponents": {}
}
wxml
<view class='status-bar'><view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{show_bol}}'> /*返回按钮*/<image src='/images/back.png'></image></view><view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;"><text class="red">{{title}}</text> /*标题*/</view></view>
hidden='{{show_bol}}'
这里的show_bol
就是用来控制是否显示返回标签(说白了就是是内页还是首页,该不该有返回功能)padding-top:{{bar_Height}}px
bar_Height为获取到的手机状态栏的高度;
wxml(2020年3月更新)
所有页面因导航栏脱离文档流导致上移,统一控制。
解决:
原基础上最外层再加一层< view > 来占据padding的位置,适配所有页面,加上cover_state控制是否需要,如果顶部导航需要透明则设为false
<view style="padding-top:{{cover_state ? bar_Height + 44 : 0}}px;"><view class='status-bar'><view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{show_bol}}'> /*返回按钮*/<image src='/images/back.png'></image></view><view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;"><text class="red">{{title}}</text> /*标题*/</view></view>
</view>
js
Component({/* 组件的属性列表 */properties: {title: { // 设置标题type: String,value: '' },cover_state: { // 控制页面padding-toptype: Boolean,value: false},show_bol: { // 控制返回箭头是否显示type: Boolean,value: false},my_class: { // 控制样式type: Boolean,value: false}},/* 组件的初始数据 */data: {type: "组件",bar_Height: wx.getSystemInfoSync().statusBarHeight // 获取手机状态栏高度},/* 组件的方法列表 */methods: {goBack: function () { // 返回事件console.log("退后")wx.navigateBack({delta: 1,})}}
})
wxss
/* 顶部导航 */
.status-bar {width: 100%;z-index: 99999;position: fixed;top: 0;
}
.goBack{position: absolute;top: 15rpx;font-size:12pt;
}
.goBack image{width: 21rpx;height: 40rpx;padding: 12rpx 20px 0 30rpx;
}
.tabar {display: flex;justify-content: center;background-color: #fff;
}
.tabar2{background: transparent !important;
}
.tabar2 text{color: #fff !important;font-weight: lighter !important;
}
.tabar text {height: 44px;line-height: 44px;padding: 0 30rpx;color: #353535;font-size: 12pt;font-weight: bold;
}
.tabar .active {color: #fff;
}
4:使用组件(一般都在内页才用到)
json
{"usingComponents": {"component": "/component/component" //component自定义名称 后面为组件路径}
}
wxml
<component title='我是tabbar的页面' show_bol='{{false}}'></component> //show_bol为false 就是没有返回箭头<component title='我是带返回的页面' show_bol='{{true}}'></component> //show_bol为false 就是没有返回箭头
问题:
这里导航是出来了,但是会有个问题,导航嘛肯定是要固定定位的,所以他就脱离了文档流,组件放进去后,会悬浮在上面,遮挡了下面的内容,这时候就需要给父元素加个padding-top了
// e:1
<view class='box-detail' style="padding-top:{{bar_Height + 45}}px;"><component title='EatUp趣味食光' show_bol='{{false}}'></component>......
</view>
// e:2
<view class='box-detail' style="padding-top:{{widnowH <=568 ?bar_Height + 40:bar_Height + 45}}px;"> <component title='EatUp趣味食光' show_bol='{{false}}'></component>......
</view>
bar_Height
: wx.getSystemInfoSync().statusBarHeight (状态栏的高度)
widnowH
: wx.getSystemInfoSync().screenHeight (屏幕高度)
这里的padding-top的距离,就是状态栏的高度
+ 导航栏的高度
了,然后就可以很愉快的使用了,不过不同的机型还需要不同的适配,如果有更好的办法,可以给我讲解下,感谢大佬!
5:最终效果
【小程序】自定义导航栏相关推荐
- 记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案 主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
- 微信小程序自定义导航栏(带汉堡包菜单)
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值 整个导航栏的高度: ...
- 小程序自定义导航栏返回主页
小程序自定义导航栏返回主页 效果图 在app.js中获取状态栏的高度statusBarHeight 自定义组件navbar.wxml 自定义组件navbar.wxss 自定义组件navbar.json ...
- 说一说要求 小程序自定义导航栏 的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在 超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中 自定义导航栏 绝对算得上是最恶心的需求之一.本篇文章 ...
- 小程序自定义导航栏 navigationStyle
小程序自定义导航栏 微信提供自定义导航栏说明 开始自定义导航栏组件 微信提供自定义导航栏说明 微信版本 6.60 window下的 navigationStyle 属性,设置为 custom 即可关闭 ...
- taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏(完美适配所有手机)...
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 小程序自定义导航栏(完美适配所有手机)解决上下不居中 左右不对齐 高度不协调问题...
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 微信小程序自定义导航栏 navigation bar 返回键 首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件 版本号:2.0.0 作者:chen-yt github: https://g ...
- 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
最新文章
- 愚蠢的CNN,换个马甲就认不出猫!但,这病能治 | ICLR Oral
- 我的新浪微博,顺便总结下近况
- iOS开发UI篇—UITableviewcell的性能优化和缓存机制
- index.html文件作用,MEAN JS – 主要的html文件(index.html)位于何处
- jQuery easyUI--accordion折叠面板
- python对csv文件中的数据进行分类_python 数据处理 对csv文件进行数据处理
- 雷达的L、S、C、X波段是什么
- JSP内置对象-out对象
- 每个人心里一亩一亩田,每个人心中一个一个梦
- Altium Designer 步骤总结(转)
- SQL SERVER 插入时表名显示对象名无效 问题
- 合肥工业大学机器人技术期末_合肥工业大学 机器人技术 作业和实验
- lk:littlekernel-概述
- Navicat Premium和Navicat for MySQL哪个好用?
- 支付系统--清结算概括介绍
- HTML+css 基础语法
- GMT格式的时间处理 Thu Jan 01 00:00:00 +0000 2009成时间戳
- linux中fq格式转fa,利用linux处理fq/fa小练习
- MSIL(0):简介
- Java 实现 QQ 登陆
热门文章
- 高并发解决方案——Redis(一)
- vivo X90、vivo X90 Pro和vivo X90 Pro+的区别 参数对比哪个好
- 棒球·飞盘·MLB棒球创造营
- 3款在线网页原型图设计软件推荐
- ps入门教程、ps修图基本工具使用方法视频教学
- 华为云Web应用防火墙 ——为网络安全打通“第一公里”
- 计算机英语专利,计算机专利用英语词汇1500词.pdf
- The Joel Test:Joel 用来评价软件开发团队成熟度的12个问题
- ​华为回应出售手机业务传闻:假消息;微软将ChatGPT整合到更多工具中:不用写代码就能开发应用;苹果更新Mac产品线|极客头条...
- 少儿编程pythonppt-五年级的孩子学编程有没有意义?