微信小程序顶部导航栏样式设置(自定义)
效果:
一、要用自定义的导航栏需要在app.json中配置(必须)
取消自带的导航栏:"navigationStyle": "custom"
目前微信小程序不支持单个页面设置,一旦在要决定使用自定义导航栏,那么每个页面都需要设置,为了方便我就将其写成了一个组件:
二、目录结构
1、navbar.wxml文件:
<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
<view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
<view style='display: flex; justify-content: space-around;flex-direction: column'>
<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
<view bindtap='_navback' wx:if='{{!share}}'>
<view class="iconfont icon-fanhui"></view>
<!-- <image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image> -->
</view>
<view class='navbar-v-line' wx:if='{{!share}}'></view>
<view bindtap='_backhome'>
<!-- <image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image> -->
<view class="iconfont icon-fanhui"></view>
</view>
</view>
</view>
</view>
2、 navbar.wxss文件:
/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
@import "../../Iconfont/iconfont.wxss";
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #fff;
color: #000;
z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 600;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.navbar-v-line {
width: 1px;
height: 32rpx;
background-color: #e5e5e5;
}
.back-pre, .back-home {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule .back-home {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
3、navbar.json文件:
{
"usingComponents": {
"navbar": "../components/navbar/navbar"
}
}
4、navbar.js文件:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
// 组件所需的参数
nvabarData: {
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
title: '我的主页', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
height: app.globalData.height * 2 + 20,
},
onLoad() {
console.log(this.data.height)
}
})
5、app.js文件:
//app.js
App({
onLaunch: function (options) {
// 判断是否由分享进入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
//这个最初我是在组件中获取,但是出现了一个问题,当第一次进入小程序时导航栏会把
//页面内容盖住一部分,当打开调试重新进入时就没有问题,这个问题弄得我是莫名其妙
//虽然最后解决了,但是花费了不少时间
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默认为false
height: 0,
}
})
6、app.wxss文件(此文件可以不配置):
pages {
position: relative;
z-index: 9999998;
background: #fff;
}
三、在微信小程序页面中:
1、pages文件夹contactUS.wxml文件:
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view class='home-page' style='margin-top: {{height}}px'>
<h4 class="navbar-relation">联系我们</h4>
<view class="iconfont icon-fanhui" style="font-size:36rpx;"></view>
</view>
2、pages文件夹contactUS.json文件中(声明使用的组件,和组件的地址):
{
"usingComponents": {
"navbar": "../components/navbar/navbar"
}
}
3、pages文件夹contactUS.js文件:
//contactUS.js
//获取应用实例
const app = getApp()
Page({
data: {
showIcon: true
},
})
4、pages文件夹contactUS.wxss文件:
/* @import "../Iconfont/iconfont.wxss"; */
/* 导航栏样式 */
.home-page{
position: fixed;
height: 140rpx;
width: 100%;
background-color: #EAC100;
z-index: 9999;
}
.navbar-relation {
display: flex;
flex-direction: column;
align-items: center;
line-height: 180rpx;
font-size: 36rpx;
}
.icon-fanhui{
position: absolute;
left: 2%;
top: 65%;
transform: translate(-2%,-50%);
font-weight: bold;
}
说明:关于iconfont图标怎么引入,我的博客里面有详细教程!
微信小程序顶部导航栏样式设置(自定义)相关推荐
- 微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置 全局设置 app.json "window": { "navigationBarTextStyle& ...
- 微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度,防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度 一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
- 微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
- 微信小程序之导航栏样式修改、自定义导航栏及封装
在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下.(微信小程序json文件不能有注释,复制过去的时候有注释记得自行 ...
- 微信小程序顶部导航栏颜色修改
1.单个页面,在该页面的json文件里修改 (1)修改导航栏颜色: "navigationBarBackgroundColor": "#1556D2", 去除导 ...
- 微信小程序顶部导航栏
效果图 1.wxml <!--导航条--> <view class="navbar"><text wx:for="{{navbar}}&qu ...
- 微信小程序头部导航栏自定义
微信小程序头部导航栏自定义 参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮 配置示例 {&quo ...
- 微信小程序顶部去除默认样式后依旧显示返回按钮和顶部页面名称
微信小程序顶部白边变透明后依旧显示返回按钮和顶部标题名称 ⭕️ 实现效果: 正文 1⃣️ 官方并没有提供相关的api 2⃣️ 本文实现的效果能响应式的适配任何机型(安卓苹果通用) 3⃣️ 先得去ico ...
- 微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机;tabBar页获取不到参数问题;navigateTo跳转无效问题;onShow执行两次问题;
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
最新文章
- 一句话评论设计模式六大原则
- C#静态类 转载:(原文:http://www.cnblogs.com/chenlulouis/ )
- 对象 普通po转_厦门2020年转学怎么转?需要什么材料?你想知道的答案都在这!......
- 我的angularjs源码学习之旅1——初识angularjs
- 持续集成部署Jenkins工作笔记0011---配置构建命令并手动执行一次构建
- 灰度资产管理总规模升至429亿美元
- Spring的IOC机制
- 【android开发】实现语音数据实时采集/播放
- 火爆互动小游戏源码接入方法,需要的产品人请查收
- win10安装双系统——ubuntu20.04安装步骤
- JNI/NDK入门指南之JNI数据类型,描述符详解
- 小白眼中的docker究竟是个什么东西
- (转)sqlite developer注册方法
- 线段树求逆序对(hdu1394Minimum Inversion Number)
- 汉庭酒店专属歌曲发布,由左小祖咒和罗永浩创作
- LabVIEW操作鼠标滚轮放大/缩小图像
- php图片背景平铺,css如何让背景图片平铺?css背景图片平铺四种方式介绍
- 程序员老了怎么办?做什么好?
- 设计电子计算机,电机设计电子计算机在电机设计计算中的应用(电机设计CAD)...
- Spring基础复习总结