微信小程序自定义导航栏
作者：zhoushenxian 发布时间：2024-11-17 22:43:57
标签：微信小程序,导航栏
本文实例为大家分享了微信小程序自定义导航栏，供大家参考，具体内容如下
在微信小程序中导航栏是可以直接配置的:
目前只支持二种，但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了,
"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;
}
效果图：
来源：https://blog.csdn.net/coderinchina/article/details/84315981
0
投稿猜你喜欢
- 我想让一片文章,每到3000字就分到下一条插入到数据库,求高手 <％Dim Content Conte
- 如下所示：import ( "golang.org/x/net/html")在使用此包时，会导入失败，因为这
- windows10：1，先要pip安装pydotplus和graphviz：pip install pydotpluspip install
查了很多很多的资料无果，果然知乎牛逼，完美解决。爬取网站时，最终得到list内容，编码为unicode，想让其转换为汉字并输出。需要提取的为- 在 ASP 的内建对象中除了用于发送、接收和处理数据的对象外，还有一些非常实用的代表 Active Server 应用程序和单个
- 这篇文章主要介绍了python检测服务器端口代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 一、单因素分析线性拟合功能：线性拟合，单因素分析，对散点图进行线性拟合，并放大散点图的局部位置输入：某个xlsx文件，包含'患者密度
- 一般情况下编译安装python环境需要执行以下步骤：下载源码包解压源码包安装配置编译以及编译安装TALK IS CHEAP, SHOW YO
- Keepalived由于在生产环境使用了mysqlcluster,需要实现高可用负载均衡,这里提供了keepalived+hap
- 简介 开启慢查询日志，可以让MySQL记录下查询超过指定时
- 这是一个很和谐很实用的网站管理程序，和我以前介绍的服务器管理程序不同的是，这个程序只有一个功能，就是实现远程Web方式删除文件（实际上是重命
- 一、区别1、 history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听l
- 在开始安装前，先说明一下mysql-5.6.4与较低的版本在安装上的区别，从mysql-5.5起，mysql源码安装开始使用cmake了，因
- 或许现在关心交互设计的设计师们大部分来自于了互联网行业，所以我们看到当你搜索“交互设计”时更多的BLOG和文章是在谈论互联网，网站的导航，注
- 写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。这节来看看createEl
- 本文实例讲述了Python实现获取磁盘剩余空间的2种方法。分享给大家供大家参考，具体如下：方法1：import ctypesimport o
- 一丶什么是索引索引是存储引擎快速找到记录的一种数据结构。数据库中的数据可以理解成字典中的单词，而索引就是目录，显而易见这是一种空间换时间的做
- 1.背景1.1. 项目介绍golang/sync库拓展了官方自带的sync库，提供了errgroup、semaphore、singlefli
- MS SQL基本语法及实例操作 一：建表并初始化 ============================ create database
- 起序：本文是在 python 自己的虚拟环境下做的，不是在 Anaconda 下做的。一、安装想要更改 jupyterlab 的默认启动位置
