微信小程序自定义导航栏


Posted in Javascript onDecember 31, 2018

本文实例为大家分享了微信小程序自定义导航栏,供大家参考,具体内容如下

在微信小程序中导航栏是可以直接配置的:

微信小程序自定义导航栏

目前只支持二种,但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了,

"window":{
 "navigationStyle": "custom"
},

 我就配置了这个属性,现在来看看我的界面

微信小程序自定义导航栏

红色箭头指向的是配置后自动生成的,我没有写任何代码,比如我在更多界面导航栏需要自定义,那么在more.js中在onLoad()方法中获取到全局存储的导航栏高度,然后高度设置给组件就行了,

app.js:

/**
 * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
 */
 onLaunch: function () {
 wx.getSystemInfo({
  success: res => {
  //导航高度
 
  this.globalData.navHeight = res.statusBarHeight+46;
  this.navH = res.statusBarHeight;
  this.platform = res.platform;
  }
 })
 },
this.globalData.navHeight这个变量是在app.js中定义的:

 globalData: {
 isPlayMusic :false,
 doubanBase: "http://t.yushu.im",
 navHeight:0
 },

然后在more.js中获取

onLoad: function (options) {
 this.setData({
  navH: App.globalData.navHeight
 })
 },

要获取全局的变量要使用:

var App = getApp();

获取到全局对象  this.setData({})是更新data:{}中定义的变量

data: {
 navH:0
 },

默认值是0

more.wxml:

<view>
 <view class='more_main' style='height:{{navH}}px'>
 <view class='title_contanier'>
 <text class="more_title">更多</text>
 </view>
 </view>
</view>

 more.wxss

.more_title{
 margin:0 auto;
 margin-top: 75rpx;
 text-align:center;
 font-size: 32rpx;
 }
.title_contanier{
 display: flex;
 flex-direction: row;
}
.more_main{
 width: 100%;
 background-color: greenyellow;
}

效果图:

微信小程序自定义导航栏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 #Javascript
JavaScript ES6箭头函数使用指南
Dec 30 #Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 #Javascript
JavaScript事件对象深入详解
Dec 30 #Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 #Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 #Javascript
基于Three.js实现360度全景图片
Dec 30 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
phpQuery占用内存过多的处理方法
2013/11/13 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JS实现self的resend
2010/07/22 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
wxPython之解决闪烁的问题
2018/01/15 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
乡镇四风对照检查材料
2014/08/31 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2015年度物流工作总结
2015/04/30 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
浅析python中特殊文件和特殊函数
2022/02/24 Python