微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了。
首先新建一个顶部导航公用组件topnav,导航高度怎么计算?
- 1.wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息
- 2.screenHeight - windowHeight 计算标题栏高度
- 3.标题栏高度
- 'iPhone': ,
- 'iPhone X': ,
- 'android':
app.js
- //app.js
- App({
- onLaunch: function () {
- var that = this
- wx.getSystemInfo({
- success: function (res) {
- that.globalData.platform = res.platform
- let totalTopHeight =
- if (res.model.indexOf('iPhone X') !== -) {
- totalTopHeight =
- } else if (res.model.indexOf('iPhone') !== -) {
- totalTopHeight =
- }
- that.globalData.statusBarHeight = res.statusBarHeight
- that.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
- },
- failure() {
- that.globalData.statusBarHeight =
- that.globalData.titleBarHeight =
- }
- })
- })
还需更改配置app.json
- "window": {
- "backgroundTextStyle": "light",
- "navigationBarBackgroundColor": "#15ae67",
- "navigationBarTitleText": "微信小程序",
- "navigationBarTextStyle": "white",
- "navigationStyle": "custom"
- //自定义导航栏配置
- }
topnav.wxml
- <!--template.wxml-->
- <!-- 这是自定义组件的内部WXML结构 -->
- <view style="padding-top:{{someData.statusBarHeight+someData.titleBarHeight}}px">
- <view class="hh-header">
- <view class="status-bar" style="height:{{someData.statusBarHeight}}px"></view>
- <view class="title-bar" style="height:{{someData.titleBarHeight}}px">
- <view wx:if="{{isShowBack=='true'}}" class='hh-nav-back ico-back' bindtap='goback'></view>
- <view wx:if="{{isShowBack=='false'}}" class='hh-nav-back'></view>
- <view class="hh-title">{{innerTitle}}</view>
- <view class="hh-nav-right"></view>
- </view>
- </view>
- </view>
- <slot></slot>
topnav.json
- {
- "component": true
- }
topnav.js
- const app = getApp()
- Component({
- properties: {
- // 这里定义了innerText属性,属性值可以在组件使用时指定
- innerTitle: {
- type: String,
- value: '头部标题'
- },
- isShowBack: {
- type: String,
- value: "true"
- }
- },
- data: {
- // 这里是一些组件内部数据
- someData: {
- statusBarHeight: app.globalData.statusBarHeight,
- titleBarHeight: app.globalData.titleBarHeight
- }
- },
- methods: {
- // 这里是一个自定义方法
- goback: function () {
- wx.navigateBack({
- delta: ,
- })
- }
- }
- })
topnav.wxss
- .ico-back{
- width: 36rpx;
- height: 36rpx;
- background-size: contain;
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAwRjFBMThDOEU1NDExRThCQUMxRTFBRUNDRDNCMkJEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAwRjFBMThEOEU1NDExRThCQUMxRTFBRUNDRDNCMkJEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDBGMUExOEE4RTU0MTFFOEJBQzFFMUFFQ0NEM0IyQkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDBGMUExOEI4RTU0MTFFOEJBQzFFMUFFQ0NEM0IyQkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7a0EjNAAAA80lEQVR42sTYOw7DIAwGYNxuPXHnTtygvUAuWalyE6WRMlBj7N/GEkOiCD4B4eHCzEUq3ljruPMe9fcstxcJOmGOqNNADcwR+SABs6SDOphrKqiHSZ3UGkwaSItJAY1gwkGjmFCQBRMGsmJCQB4MHOTFQEEIDAyEwkBASIwGRIrFr/XBZy03InpbQFJcFHW8Gu+2nnmUiFAM2daLzz/DVtHtaSc1DIX87SEo9MLoRkVsHS5U1OZqRkUeP0yo6APaMCrjCDuEyjrkq1GZ1yAVKvui2EXNuEqLqFnJBgk1LR3TQi08OWF1RqmyH8SAtB0yvgIMAGA41d9Fo4AZAAAAAElFTkSuQmCC);
- background-repeat: no-repeat;
- background-position-x: 20rpx;
- }
- .hh-header {
- position: fixed;
- top: ;
- width: %;
- background-color: #14ae66;
- z-index: ;
- }
- .hh-title{
- font-size: 38rpx;
- text-align: center;
- color: #fff;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .title-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .hh-nav-right{
- width: 116px;
- }
- .hh-nav-back{
- width: 116px;
- }
这样组件就写好了 只需要在你每个页面里面用这个组件传不同的值就可以了。
index.wxml
- <component-topnav inner-title="{{title}}"></component-topnav> //显示返回按钮
index.js
- //获取应用实例
- const app = getApp()
- Page({
- data: {
- motto: 'Hello World',
- userInfo: {},
- title:'自定义导航标题'
- },
- })
index.json
- {
- "usingComponents": {
- "component-topnav": "/pages/component/topnav"
- }
- }
微信小程序(18)-- 自定义头部导航栏的更多相关文章
- uniapp 小程序实现自定义底部导航栏(tarbar)
在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> < ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 微信小程序开发之tab导航栏
实现功能: 点击不同的tab导航,筛选数据 UI: js: data:{ navbar: ['半月维保', '季度维保', '半年维保',"年度维保"], //count ...
- 小程序 mpvue自定义底部导航栏
1.在compontents新建文件放入 <template> <section class="tabBar-wrap"> <article clas ...
- 微信小程序点击顶部导航栏切换样式
类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scro ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 微信小程序中自定义modal
微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...
- 微信小程序:自定义导航栏
在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏.那先要清楚这导航可不能写死,每种手机的导航都各不相同. 一.在app.json的window对象中定义导航的样式: ...
- 微信小程序:自定义组件
为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...
随机推荐
- vue-cli 2.0搭建vue脚手架步骤
1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...
- mysql 8.0.13 zip windows 10安装
1.下载安装包 https://dev.mysql.com/downloads/mysql/ 下载后解压到D:\Program Files\mysql-8.0.13-winx64 2.添加配置文件my ...
- Java泛型与集合笔记
第一章 Java的泛型为了兼容性和防止代码爆炸,在编译成字节碼时会进行类型擦除,编译器自动添加代码做类型转换(用到List<Integer>的地方用Integer来做转换),自动做装箱拆箱 ...
- myeclipce注册
今天提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码! 1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击sr ...
- c#代码规则,C#程序中元素的命名规范
俩种命名方法 1.Pascal 命名法,第一个字母大写其它字母小写Userid 2.Camel命名法,所有单第一方写大写,其它小写,骆峰命名法,userId C#程序中元素的命名规范项目名:公司名.项 ...
- BZOJ 2286: [Sdoi2011]消耗战 虚树
Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...
- Android逆向之旅---静态分析技术来破解Apk
一.前言 从这篇文章开始我们开始我们的破解之路,之前的几篇文章中我们是如何讲解怎么加固我们的Apk,防止被别人破解,那么现在我们要开始破解我们的Apk,针对于之前的加密方式采用相对应的破解技术,And ...
- 20180802-Java 方法
Java 方法 下面的方法包含2个参数num1和num2,它返回这两个参数的最大值. /** 返回两个整型变量数据的较大值**/ public static int max(int num1,int ...
- Elven Postman
Elven Postman Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- Hibernate入门学习笔记
1.Hibernate是什么? 2.hibernate怎么配置? 3.SessionFactory是干什么的?有哪些方法经常用? 4.hibernate的现成的增删改查方法怎么使用?都有哪些方法?哪些 ...