微信小程序自定义导航栏(带汉堡包菜单)
微信小程序自定义导航栏(带汉堡包菜单)
1.在app.json中 window配置navigationStyle
(如果单独页面使用,可在页面的json文件配置)
2.计算相关值
整个导航栏的高度;
胶囊按钮与顶部的距离;
胶囊按钮与右侧的距离。
小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息
通过这些信息我们可以计算出上面说的3个值:
整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;
胶囊按钮与顶部的距离 = top;
胶囊按钮与右侧的距离 = windowWidth - right。
App.js 代码如下:
3.头部组件navBar
navBar.wxml
<view class="navbar" style="height:{{navHeight}}px;"><view class="navbar_left" style="top:{{navTop}}px;" wx:if="{{showNav}}"><view class="btn" bindtap="navBack"><text class="iconfont icon-jiantouzuo"></text> </view><view class="nav_line"></view><view class="btn" bindtap="navMenu" wx:if="{{showHome}}"><text class="iconfont icon-hanbaobao"></text> </view></view><!-- 中间标题 --><view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view><!-- 弹出菜单 --><view class="modal-mask" wx:if='{{isMask}}' catchtouchmove="preventTouchMove" bindtap="hiddenMask"></view><view wx:if="{{isMask}}" class="maskMenu" style="top:{{navHeight+8}}px"><view></view><view><view bindtap="navIndex"><text style="color:#222; margin-right:10rpx;font-size:36rpx;" class="iconfont icon-shouye2"></text><text>首页</text></view><view></view><view bindtap="navUser"> <text style="color:#222; margin-right:10rpx;font-size:36rpx;" class="iconfont icon-wode"></text><text>我的</text></view></view></view></view>
navBar.wxss
.navbar {width: 100%;/* overflow: hidden; */position: fixed;top: 0;left: 0;z-index: 10;background: #fff;
}
.navbar_left{/* width: 170rpx; */display: flex;align-items: center;justify-content: space-around;position: absolute;left: 10px;z-index: 11;padding: 6rpx 20rpx 6rpx 10rpx;border:1rpx solid #f0f0f0;border-radius: 40rpx;overflow: hidden;background: rgba(255,255,255,0.6);
}
.btn{width: 50rpx;height: 50rpx;line-height: 50rpx;text-align: center;
}
.nav_line{width: 2rpx;height: 40rpx;background: #f0f0f0;margin: 0 10rpx;
}
.navbar_title{width: 100%;box-sizing: border-box;padding-left: 115px;padding-right: 115px;height: 32px;line-height: 32px;text-align: center;position: absolute;left: 0;z-index: 10;color: #222;font-size: 36rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.modal-mask {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0; overflow: hidden; z-index: 9;}.maskMenu{ position: absolute;left: 25rpx; z-index: 10;
}
.maskMenu>view:nth-child(1){position: absolute;top: -11rpx; background: #fff; left: 85rpx; width: 30rpx;height: 30rpx;box-shadow:-2rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.25); transform:rotate(45deg);
}
.maskMenu>view:nth-child(2){width:200rpx;height:153rpx;background:rgba(255,255,255,1);box-shadow:0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.45);border-radius: 10rpx;padding: 10rpx 0rpx 10rpx 20rpx; border-color: #ccc;display: flex; flex-direction: column;justify-content: space-around;font-size: 28rpx;color: #222222;
}
.maskMenu>view:nth-child(2)>view{ display: flex;align-items: center; }
.maskMenu>view:nth-child(2)>view:nth-child(2){ width: 100%;height: 2rpx;background: #ccc; }
navBar.js
const App = getApp();
Component({/*** 组件的属性列表*/properties: {pageName: String, //中间的titleshowNav: { //判断是否显示左上角的按钮 type: Boolean,value: true},showHome: { //判断是否显示左上角的home按钮type: Boolean,value: true}},/*** 组件的初始数据*/data: {showNav: true, //判断是否显示左上角的home按钮showHome: true, //判断是否显示左上角的按钮isMask: false,},lifetimes: {// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function () {this.setData({navHeight: App.globalData.navHeight,navTop: App.globalData.navTop})}},/*** 组件的方法列表*/methods: {/*** 弹出框蒙层截断touchmove事件*/preventTouchMove: function () {return},//回退navBack: function () {wx.navigateBack()},//菜单navMenu: function () {this.setData({isMask : !this.data.isMask})},hiddenMask :function(){this.setData({isMask : false})},navIndex :function(){wx.switchTab({url: '../../pages/index/index',})},navUser: function () {wx.switchTab({url: '../../pages/user/user',})}}
})
navBar.json
{"component" : true,"usingComponents" : {}
}
4.index中
index.json
index.wxml
<view class="view-page"><navbar page-name="你当前页面的名字" show-nav="{{showNav}}" show-home="{{showHome}}"></navbar><view class='page-content' style="margin-top:{{navHeight}}px;"><!--这里放你的内容--></view>
</view>
index.js
const app = getApp()
Page({data:{navHeight: app.globalData.navHeight,showNav:true,showHome:true,}
)}
效果图
微信小程序自定义导航栏(带汉堡包菜单)相关推荐
- 微信小程序自定义导航栏 navigation bar 返回键 首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件 版本号:2.0.0 作者:chen-yt github: https://g ...
- 微信小程序自定义导航栏如何实现(简洁版)~内附代码
先来张效果图 实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
- 微信小程序-自定义导航栏
微信小程序-自定义导航栏 第一步 添加属性 "navigationStyle": "custom" 第二步 自定义导航栏 第二步 自定义组件 第四步 使用组件 ...
- 微信小程序自定义导航栏组件
效果图 首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏 一.子组件-wxml <vi ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 {"navigationStyle": "custom" // 将navigatio ...
- 微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
- 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- 微信小程序自定义导航栏完整适配方案
写这篇博客的背景 临近节日,产品想给小程序首页头部设置图片背景,这个只能自定义导航栏来实现 当然除了自定义背景图,还可以放置其他组件,按钮.搜索框等 实践部分设备状态栏.胶囊.间距的高度(仅供参考)( ...
最新文章
- 【NOIP】提高组2015 神奇的幻方
- PHP中类和文件的代码注释规范
- C#中嵌入互操作类型的含义
- http --- 基本认证与摘要认证
- oracle重新编译package,如何有效的编译数据库中的失效对象(Package,trigger等)
- 一个封装了的选项卡效果js
- java dfs算法蓝桥杯题_【蓝桥杯省赛JavaB组真题详解】四平方和(2016)_疼疼蛇的博客-CSDN博客...
- [deviceone开发]-土地销售App开源
- - 贪心基础入门讲解二——活动安排问题
- as3.0 当fla里面有TLF文本的时候,加载声音会出现错误
- 图文讲解uni-app支持PC宽屏
- 如何理解数学公式中出现的极大极小minmax含义
- 供参考的一些APP推广渠道
- 药用植物学-----植物的细胞
- bzoj 5185 Lifeguards - 动态规划 - 贪心
- 如何把小米手机便签内容云同步到iPhone XS上?
- WPS使用,实现用WPS打开在线文档并且进行编辑
- 【现代机器人学】学习笔记七:开链动力学(前向动力学Forward dynamics 与逆动力学Inverse dynamics)
- poj 2942 Knights of the Round Table(双连通分量+tarjan+二分图判定)
- 宝可梦世界无限极怎么开服务器,口袋妖怪世界无极限运行库