全国咨询热线:18720358503

微信小程序价钱_微信小程序自界说导航栏实例代

类别:媒体报道 发布时间:2021-01-07 浏览人次:

微信小程序自定义导航栏实例代码       这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
Android、IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好

我们希望的是:在各个机型页面上title一致性 个性化展示、取得左上角点击事件控制权及深层级页面的一键返回

实现

step1 自定义

第一步 取得导航栏的控制权

小程序支持自定义导航栏,只需要在app.json文件中,window项中配置

"navigationStyle": "custom"

这样微信就放开了导航栏的控制权,只保留右上角的胶囊。

页面会从视窗的顶部开始渲染,如图

接下来,我们要做的就是实现一个导航栏组件,把它放置在页面原来的默认导航栏的位置,内容什么的完全由开发者自己定制。

step2 功能点

第二步 梳理导航栏的功能点

导航栏高度(各个机型动态适配) 导航栏内容定制 所有机型title居中显示(自己布局实现) 首页导航栏左上角显示个人中心、中部title使用个性图标 嵌套页面左上角显示返回上一页 + 回到首页按钮 非常规首页左上角显示回到首页按钮

导航栏高度 包含两个部分:工具栏和title栏, 工具栏的高度一般是固定的20px,title栏的高度需要计算

导航栏内容的定制,需要识别当前页面的性质,根据不同的页面展示不同的内容,可以通过获取当前的页面路由栈来判定当前的页面性质


step3 导航栏组件基本结构

目前快狗打车小程序的基本结构

// navBar.wxml
 cover-view /cover-view 
 cover-view 
 cover-view /cover-view 
 cover-view 
 cover-view 
 // scene0 常规首页 个人中心按钮
 // scene1 非常规首页 回首页按钮
 // scene2 嵌套页 返回上一页按钮 + 回首页按钮
 /cover-view 
 cover-view 
 // scene0 常规首页 个性化title
 // scene1 其他页 正常title
 /cover-view 
 cover-view 
 // 占位用的
 /cover-view 
 /cover-view 
 /cover-view 

Ti凡科抠图:

组件内多了一个占位的place-holder块,是因为某些页面有类似滚动列表的需求,要保证导航栏始终在视窗的顶部的话,需要使用定位,定位之后脱离文档流,在最初的时候需要占位块保证后续的页面内容不会被导航栏遮挡

使用cover-view布局是因为快狗的业务中有类似map的原生组件,使用view的话有被遮挡的风险

step4 高度计算

需要计算title-bar的高度

在 默认导航栏 无底部tab栏 的情况下,使用wx.getSystemInfoSync获取手机信息,可以看到两项信息:

screenHeight 屏幕高度,单位px windowHeight 可使用窗口高度,单位px

这种情况下,二者的差值就是默认的导航栏的高度, 但是在设置了"navigationStyle": "custom"之后,二者的值是一样的了,因此导航栏的高度我们需要使用统计的经验值。

根据统计,得到如下的结果:

 'iPhone': 64,
 'iPhoneX': 88,
 'Android': 68,
 'samsung': 72
}

工具栏的高度可根据wx.getSystemInfoSync返回值中的statusBarHeight获取。

至此,我们得到了导航栏的相关的高度值

// 导航栏总高度 占位块高度
placeHoder = totalBar = {
 'iPhone': 64,
 'iPhoneX': 88,
 'Android': 68,
 'samsung': 72
// 时间、信号等工具栏的高度
toolBar = systermInfo.statusBarHeight
// 页面title栏的高度
titleBar = totalBar - toolBar

step5 内容定制

在组件的生命周期函数attached中,我们可以获取当前的页面路由栈

let pages = getCurrentPages()
let current_page = pages[pages.length - 1].route 
const NORMAL_ENTRY = '常规的入口页路径'
// scene 0 常规入口页 个性化title、个人中心
pages.length === 1 current_page === NORMAL_ENTRY
// scene 1 非常规入口页 回首页
pages.length === 1 current_page !== NORMAL_ENTRY
// scene 2 嵌套页面 返回 + 回首页
pages.length 1 

根据不同的条件,展示不同的内容

最终效果

scene 0 常规首页

scene 1 非常规首页

scene 2 嵌套页

目前在生产环境99%的机型中,都可以完美的运行。

写在最后

自定义导航栏是全局生效的,一旦设置,各个原生小程序页面都需要引入 目前微信版本7+支持了针对特定页面的自定义导航栏,可以根据需要个性化定制 自定义导航栏在web-view页面不会起效 有尝试把导航栏做成插件,但是遇到在插件组件中无法获取页面路由栈的问题,因此没有成功

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对凡科的支持。


推荐阅读

微信小程序价钱_微信小程序自界说导航栏实例代

手机微信微信小程序自定导航栏栏案例编码 本文关键给大伙儿详细介绍了有关手机微信微信小程序自定导航栏栏的有关材料,原文中根据实例编码详细介绍的十分详尽,对大伙儿...

2021-01-07
苹果iOS 5移动操作系统正式在全球范围内推出

iPhoneiOS 5移动实际操作系统软件今日宣布发布。iPhoneiOS 5移动实际操作系统软件宣布发布,现阶段可完全免费开展免费下载。新浪网高新科技讯 北京市時间十月13日零晨信息,iPhone移动实...

2021-01-07
什么是全网营销型网站建设?

在互连网发展趋势早期,许多公司做互联网营销推广一般全是挑选在淘宝网天猫商城那样的大中型第三方服务平台做营销推广,但伴随着互连网的日渐发展趋势,公司不可以只考虑于那...

2021-01-07
个人小程序开发教程_微信小程序自界说组件传值

手机微信微信小程序自定部件传值 网页页面和部件互相传数据信息实际操作实例 本文关键详细介绍了手机微信微信小程序自定部件传值 网页页面和部件互相传数据信息实际操作...

2021-01-07
为什么现在的网站设计越来越偏向于扁平化?

谢谢大伙儿关心《为何如今的网站制作越来越越偏重于平扁化?》话题讨论,搜易高新科技()投身公司企业网站建设、网络推广服务1六年,针对《为何如今的网站制作越来越越偏重于平...

2021-01-07
广州凡科互联网科技股份有限公司招聘家装设计

招聘人数:22职位信息1、根据客户的需求,为客户量身定做风格设计、设计方案、图纸绘制、预算编制、主材选择、家具选择、选择等完整家居服务;2、对建筑材料与施工工艺的评估;...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信