小程序开发(6)-之自定义导航栏

#如图一所示，我们在导航栏中加了个文案和搜索框第一步我们需要在app.json->window设置，还可配置更多的选项：

{"navigationStyle": "custom","backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"}

第二步获取导航和状态栏的高度，下面的代码(在app.js中)其实我们也只是用到了globalData.navHeight，这个用来设置导航的高度，通过style='height:{{navHeight }}px;'来设置外部容器的高度

#因为我们项目的自定义导航变化比较多就不展示详细的代码，主要就是上面两步，其他的就是写wxml和wxss来定义导航的样式了

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
let that = this;
wx.getSystemInfo({//  获取页面的有关信息success: function (res) {wx.setStorageSync('systemInfo', res)let statusBarHeight = res.statusBarHeight;let navTop = menuButtonObject.top;//胶囊按钮与顶部的距离that.globalData.navHeight = menuButtonObject.height + statusBarHeight + 10;that.globalData.mgTOP = statusBarHeight + menuButtonObject.height + 10;that.globalData.navTop = navTop;that.globalData.menuButtonObject = menuButtonObject;that.globalData.statusBar = res;}});

#图一

小程序开发(6)-之自定义导航栏相关推荐

微信小程序开发笔记二—底部导航栏tabar
文章目录一.实现效果二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件三.注意事项一.实现效果首先展示一下实现效果底部导航栏有三个按键 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
【微信小程序】学习笔记-----navigation-bar导航栏
微信官方文档----小程序微信小程序底部的导航栏不需要自己画,通过配置即可先配置list数组,tab的列表在app.json中与其他项平级,当输入tabBar的时候会自动填补齐全,这里要注意,控 ...
微信小程序带吸顶效果的导航栏
有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏,最近刚做过一个,不多说直接上代码. .wxml <view class="limit_save fix-save&qu ...
【微信小程序创作之路】- 小程序窗口整体配置（导航栏、标题）
[微信小程序创作之路]- 小程序窗口导航栏配置第五章微信小程序窗口导航栏配置文章目录 [微信小程序创作之路]- 小程序窗口导航栏配置前言一.入口文件的配置二.页面配置三.全局默认窗口配置 ...
支付宝小程序开发练习,显示自定义二维码（四）
之前用了几种方式 1.后端生成二维码需要加密的字符窜,小程序前端利用二维码组件渲染canvas画出二维码,由于支付宝小程序没有这样的组件,于是去找微信小程序的解决方案,把微信小程序的二维码前端组件搬过 ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
微信小程序开发实战（页面导航）
@作者 : SYFStrive @博客首页 : HomePage

小程序开发(6)-之自定义导航栏

小程序开发(6)-之自定义导航栏相关推荐

最新文章

热门文章