使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom"
custom表示自定义导航栏,但会保留右上角胶囊按钮。
window: {// backgroundTextStyle: 'light',// navigationBarBackgroundColor: '#fff',// navigationBarTitleText: 'WeChat',// navigationBarTextStyle: 'black',navigationStyle: 'custom'
},
2.写组件,我这里框架使用的是vue
<template><view class="navBar">自定义NavBar</view>
</template>
<script>
export default {name: "NavBar"
};
</script>
<style>
.navBar {text-align: center;color: red;
}
</style>
3.插入组件
import NavBar from "../../components/nav/NavBar";
<template><view class="index"><NavBar></NavBar></view>
</template><script>
import NavBar from "../../components/nav/NavBar";
export default {name: "index",components: {NavBar},methods: {}
};
</script>
效果图:
4.还需了解的知识,
(1)通过Taro.getSystemInfo(res)可以得到当前系统信息
示例:
Taro.getSystemInfo({success: res => console.log(res)
})
.then(res => console.log(res))
所以自定义导航栏的总高度为: 可视区域高度screenHeight - 窗口高度windowHeight - 状态栏高度statusBarHeight
(通过此方式可以得出原系统导航栏的高度,本例的原creenHeight:568,windowHeight : 504 ,statusBarHeight :20,得到系统导航栏的高度为64px)
(2)Taro.getMenuButtonBoundingClientRect()
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
(3)此处有个两个注意点:右上角胶囊按钮的top是24px,24px - 状态栏高度20px=4px,但是 (系统导航栏高度64px - 状态栏高度20px - 胶囊按钮的高32px)/ 2 = 6px,有2px的误差 (有说错的话欢迎指正);
另一个注意点是taro里的px转换到微信小程序里会出现失真问题,解决办法:方法一.使用强制单位,大写的PX ;方法二.使用rem单位 ;方法三.只开发小程序可以使用rpx单位
---------------------
最终效果图
使用taro自定义微信小程序导航栏相关推荐
- rax自定义微信小程序导航栏
一.导航栏样式 背景: 接到一个需求,需要自定义微信导航栏,并且展示如上图存在各种样式: 难点: 兼容IOS刘海屏,IOS药丸屏,安卓无框屏.H5正常屏幕.小程序退出后台不随页面滚动: navigat ...
- 如何去掉微信小程序导航栏,以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
- 微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现 思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
- 微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
- 微信小程序导航栏制作
导航栏制作 微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
- 微信小程序导航栏怎么写
微信小程序写到到导航栏还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的. 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
- 微信小程序----导航栏透明渐变一(MUI导航栏透明渐变)
效果体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载 导航栏透明渐变效果 实现原理 利用position:absolute在导航下定位一个v ...
- 微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)
效果体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 导航栏透明渐变效果 实现原理 给page-group设置的背景颜色采用rgba; 通过改变rgba其 ...
- 定位微信小程序导航栏
定位微信小程序,首先做一个关于头部的组件, 主要是让这个组件的位置固定 这里需要使用到css的 fixed定位和z-index的属性 下面展示一些 内联代码片. // A code block var ...
最新文章
- 卡尔曼滤波器原理和matlab实现
- 在cordova中使用HTML5的多文件上传
- python requests get post_python+requests进行get、post方法接口测试
- HTML期末作业-中国足球网页
- python数据符号函数等一切皆对象_第一章:Python高级编程-Python一切皆对象
- 自己写Cache数据库之设计之初——想办法让16颗CPU扛住3w/s的压力?
- Silverlight实用窍门系列:74.Silverlight使用Perst数据库Demo
- 图卷积网络(Graph Convolutional Network)
- You don’t have permission to access / on this server
- 机器人学(机构学)笔记
- 位运算 取某一位 java_Java 位运算妙用
- win10字体模糊发虚怎么回事?win10字体模糊发虚电脑问题还是系统问题?
- 斐讯路由器K2弹广告-刷机过程
- android 内存占用 mac,mac Android Studio内存配置与使用情况的展示
- Lombok使用以及优缺点
- Python Web简介
- Python编程基础题(9-求绝对值最大的元素)
- 【Unity】物理系统的静态碰撞体、刚体碰撞体、Kinematic刚体碰撞体
- java实现堆栈_Java实现一个简单的堆栈
- 如何在Python中进行换行(换行)?