小程序自定义导航栏

微信提供自定义导航栏说明
开始自定义导航栏组件

微信提供自定义导航栏说明

微信版本 6.60
window下的 navigationStyle 属性，设置为 custom 即可关闭原生头部导航，但会保留椭圆形菜单。
Tip 暂时不支持单页面设置 navigationStyle 属性

开始自定义导航栏

了解规则

iPhone X ：导航栏高度 44 、状态栏高度 44 、tabBar高度 83
其他机型：导航栏高度 44 、状态栏高度 20 、 tabBar高度 49

自定义组件

app.wxss 添加page属性

page {position: absolute;top: 0;bottom: 0;height: 100%;background-color: #f8f8f8;font-size: 32rpx;color: #333;display: flex;flex-direction: column;
}

页面使用2层流式布局

<view ><view class='navigation'></view><view class='container'></view>
</view>

container使用布局 flex:1这个一定要加上

.container{flex: 1;display: flex;flex-direction: column;position: relative;
}

navigation组件
1.js

setNavigation(){  let startBarHeight = 20let navgationHeight = 44let that = thiswx.getSystemInfo({success: function (res) {console.log(res.model)if (res.model == 'iPhone X'){startBarHeight = 44}that.setData({startBarHeight: startBarHeight,navgationHeight: navgationHeight})}})},

2.wxml

    <view class='navigation'><view class='startBar' style='height:{{startBarHeight}}px'></view><view class='navgation' style='height:{{navgationHeight}}px'></view></view>

最后封装成组件即可

写在最后

感觉这个玩意还是官方给的香，如果现在项目用起来就自己封装一个用吧。
期待出单页面设置navigationStyle

小程序自定义导航栏 navigationStyle相关推荐

记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
小程序自定义导航栏返回主页
小程序自定义导航栏返回主页效果图在app.js中获取状态栏的高度statusBarHeight 自定义组件navbar.wxml 自定义组件navbar.wxss 自定义组件navbar.json ...
小程序自定义导航栏（适配不同手机）——拿来就用
基本思路写自定义导航组件的时候,需要将组件结构一分为二:状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取标题栏高度:安卓:48px, ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
说一说要求小程序自定义导航栏的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中自定义导航栏绝对算得上是最恶心的需求之一.本篇文章 ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...

小程序自定义导航栏 navigationStyle

小程序自定义导航栏

微信提供自定义导航栏说明

开始自定义导航栏

了解规则

自定义组件

写在最后

小程序自定义导航栏 navigationStyle相关推荐

最新文章

热门文章