vf建设银行网站,WordPress怎样交换友链,泰安网站设计,her123 wordpress需求#xff1a;要在app上的顶部导航提示哪里添加一些东西进去#xff0c;用uniapp自带的肯定不行啊#xff0c;所以自定义了所有的页面的顶部导航#xff0c;之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方… 需求要在app上的顶部导航提示哪里添加一些东西进去用uniapp自带的肯定不行啊所以自定义了所有的页面的顶部导航之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方法才实现记录一下 1.自测手机上效果 2.实现
在pages.json页面给所有需要顶部导航栏的添加自定义样式 enablePullDownRefresh: false,是否开发下拉刷新 navigationStyle: custom导航栏样式自定义
{path: pages/serve/index,style: {enablePullDownRefresh: false,navigationStyle: custom}}
3.封装主要代码讲解
创建封装的Title.vue页面 // #ifndef H5 || APP-PLUS || MP-ALIPAY // #endif 这个是预处理指令这个指令的意思是“如果H5、APP-PLUS或MP-ALIPAY这三个宏或标识符中的任何一个没有被定义则执行以下的代码 uni.getSystemInfoSync()同步获取系统的信息 uni.getMenuButtonBoundingClientRect()方法来获取某个菜单按钮的边界信息。这个方法通常用于获取某个DOM元素的边界信息包括其位置和尺寸。 // #ifndef H5 || APP-PLUS || MP-ALIPAYlet menuButtonInfo uni.getMenuButtonBoundingClientRect()this.titleBarHeight (menuButtonInfo.top - this.statusBarHeight) * 2 menuButtonInfo.height// #endif
template!-- 头部导航内容区域 --view stylemargin-bottom: 20rpx; classtop-contentview classtitle-topview classboxAndTop :style{height:statusBarHeightpx}/view/view/view
/templatescriptexport default {props: {titleName: {type: String,default: },},data() {return {// 状态栏高度statusBarHeight: 0,// 导航栏高度titleBarHeight: 82 11,menuFlag: false}},created() {//获取状态栏的高度let systemInfo uni.getSystemInfoSync()this.statusBarHeight systemInfo.statusBarHeightconsole.log(this.statusBarHeight,状态栏的高度);// #ifndef H5 || APP-PLUS || MP-ALIPAYlet menuButtonInfo uni.getMenuButtonBoundingClientRect()this.titleBarHeight (menuButtonInfo.top - this.statusBarHeight) * 2 menuButtonInfo.height// #endif},methods: {},}
/scriptstyle langscss.top-content {// position: fixed;height: 140rpx;.title-top {position: fixed;top: 0px;width: 100%;z-index: 999;height: 140rpx;background-color: #fff;}}/style
4.在页面导入使用 Title titleName设备管理 / import Title from /component/Title.vue
export default {components: {Title},
}
文章到此结束希望对你有所帮助~
