微信小程序自定义导航栏


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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
js实现网页抽奖实例
Aug 05 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
php校验表单检测字段是否为空的方法
2015/03/20 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
JavaScript 乱码问题
2009/08/06 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python列表与元组详解实例
2013/11/01 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
2016新年年会主持词
2015/07/06 职场文书
婚庆答谢词大全
2015/09/29 职场文书