微信小程序(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.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...
随机推荐
- 极限编程(XP)12个最佳实践
https://blog.csdn.net/qq_25564951/article/details/68062588 现场客户 ( On-site Customer ) 代码规范 ( Code Sta ...
- python全栈开发,Day40(进程间通信(队列和管道),进程间的数据共享Manager,进程池Pool)
昨日内容回顾 进程 multiprocess Process —— 进程 在python中创建一个进程的模块 start daemon 守护进程 join 等待子进程执行结束 锁 Lock acqui ...
- [CF846C]Four Segments题解
我们暴力枚举一下\(delim_{1}\) 然后对于每个\(delim_{1}\),O(n)扫一遍+前缀和求出最大\(delim_{0}\)和\(delim_{2}\),然后记录一下它们的位置就行啦 ...
- No module named 'requests'---问题解决记录
今天在用Pycharm执行脚本时,报错.如下: 问题排查: 1,检查是否安装了requests cmd输入命令:pip install requests 提示有新版本可以升级,那 我就升级了. 然后输 ...
- <!DOCTYPE>是什么
所有浏览器都支持<!DOCTYPE> 概念 是指web浏览器关于页面使用哪个html版本进行编写的指令. 常用DOCTYPE声明 html 5 <!DOCTYPE html> ...
- centos 无界面安装selenium+chrome+chromedirver的设置
配了一中午的,好不容易正好记录下. 1.我的centos的位数 输入rpm -q centos-release 结果:centos-release-7-4.1708.el7.centos.x86_64 ...
- TimeInOfficePresent
w x <- c(52, 30, 10, 8)labels <- c("分析思考", "写代码.调试", "沟通", " ...
- elasticsearch安装分词插件
在常用的中文分词器.拼音分词器.繁简体转换插件.国内用的就多的分别是:elasticsearch-analysis-ikelasticsearch-analysis-pinyinelasticsear ...
- rap安装mysql
1.yum仓库下载MySQL: yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm ...
- Altium Designer chapter5总结
PCB设计环境中需要注意的如下: (1)PCB设计步骤:绘制原理图和生成网表—规划电路板—载入网表—元件布局—制定设计规则—布线—后期处理—DRC检查—信号完整性分析—gerbera文件输出 (2)P ...