小程序
小游戏
企业微信
微信支付
扫描小程序码分享
每次进小程序 首页 头部的胶囊都看不见 切换页面再回到首页就出现了 头部用的自定义导航栏 而且只有安卓手机会出现这个问题 苹果手机显示正常 开发者工具 基础调试库用的 2.13.1
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
部分安卓机出现的比较严重了,自定义导航栏。启动时右边的胶囊会消失。切换后又正常了
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
机型:荣耀 magic2 微信版本号:7.0.19 系统版本号:10.1.0.162
机型:小米 微信版本号:7.0.19 系统版本号:10.3.10
首页代码
<template> <div class='user savepadding flex flex-direction'> <!-- 自定义头部 --> <use-navbar ref="useNavbar" class='followTop'></use-navbar> </div> </template> <script> import useNavbar from './components/use-navbar.vue' export default { components: { useNavbar, } } </script>
useNavbar组件
<template> <div class="customNavBar"> <u-navbar :background="background" class="navbar" :isBack="false" :height="navBarHeight"></u-navbar> </div> </template> <script> import unavbar from '@/components/u-navbar/u-navbar' export default { components: { unavbar }, data() { return { background: {}, navBarHeight: 84, //自定义头部高度 }; }, mounted() { let height = uni.getStorageSync('systemType') == 'IOS' ? 48 : 44 this.navBarHeight = uni.getStorageSync('isAddToDeskTop') ? height : height + uni.upx2px(72) }, }; </script> <style lang="scss"> .customNavBar { .navbar { position: relative; } } </style
unavbar 公共组件
<template> <view class=""> <view class="u-navbar" :style="[navbarStyle]" :class="{'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom}"> <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="u-navbar-inner" :style="[navbarInnerStyle]"> <view class="u-back-wrap" v-if="isBack" @tap="goBack"> <view class="u-icon-wrap"> <uni-icons type="arrowleft" :size="backIconSize" :color="backIconColor"></uni-icons> </view> <view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]"> {{backText}} </view> </view> <view class="u-navbar-content-title" v-if="title" :style="[titleStyle]"> <view class="u-title u-line-1" :style="{ color: titleColor, fontSize: titleSize + 'rpx' }"> {{title}} </view> </view> <view class="u-slot-content"> <slot></slot> </view> <view class="u-slot-right"> <slot name="right"></slot> </view> </view> </view> <!-- 解决fixed定位后导航栏塌陷的问题 --> <view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: Number(navbarHeight) + statusBarHeight + 'px'}"> </view> </view> </template> <script> // 获取系统状态栏的高度 let systemInfo = uni.getSystemInfoSync(); let menuButtonInfo = {}; menuButtonInfo = uni.getMenuButtonBoundingClientRect(); export default { name: "u-navbar", props: { animationHeight: { type: Object, default () { return { } } }, // 导航栏高度,单位px,非rpx height: { type: [String, Number], default: '' }, // 返回箭头的颜色 backIconColor: { type: String, default: '#fff' }, // 左边返回的图标 backIconName: { type: String, default: 'arrow-left' }, // 左边返回图标的大小,rpx backIconSize: { type: [String, Number], default: '40' }, // 返回的文字提示 backText: { type: String, default: '' }, // 返回的文字的 样式 backTextStyle: { type: Object, default () { return { color: '#606266' } } }, // 导航栏标题 title: { type: String, default: '' }, // 标题的宽度,如果需要自定义右侧内容,且右侧内容很多时,可能需要减少这个宽度,单位rpx titleWidth: { type: [String, Number], default: '250' }, // 标题的颜色 titleColor: { type: String, default: '#fff' }, // 标题的字体大小 titleSize: { type: [String, Number], default: 30 }, isBack: { type: [Boolean, String], default: true }, // 对象形式,因为用户可能定义一个纯色,或者线性渐变的颜色 background: { type: Object, default () { return { } } }, // 导航栏是否固定在顶部 isFixed: { type: Boolean, default: true }, // 是否显示导航栏的下边框 borderBottom: { type: Boolean, default: true }, zIndex: { type: [String, Number], default: '980' } }, data() { return { menuButtonInfo: menuButtonInfo, statusBarHeight: systemInfo.statusBarHeight }; }, computed: { // 导航栏内部盒子的样式 navbarInnerStyle() { let style = {}; // 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离 style.height = this.navbarHeight + 'px'; // // 如果是各家小程序,导航栏内部的宽度需要减少右边胶囊的宽度 // #ifdef MP let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; style.marginRight = rightButtonWidth + 'px'; // #endif return style; }, // 整个导航栏的样式 navbarStyle() { let style = {}; style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar; // 合并用户传递的背景色对象 Object.assign(style, this.background); return style; }, // 导航中间的标题的样式 titleStyle() { let style = {}; // #ifndef MP style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; // #endif // #ifdef MP // 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间,是通过绝对定位实现的 let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth + 'px'; // #endif style.width = uni.upx2px(this.titleWidth) + 'px'; return style; }, // 转换字符数值为真正的数值 navbarHeight() { return this.height ? this.height : 44; let height = systemInfo.platform == 'ios' ? 44 : 48; return this.height ? this.height : height; } }, created() {}, methods: { goBack() { uni.navigateBack(); } } }; </script> <style scoped lang="scss"> .u-navbar { width: 100%; // background:$theme-color-bg; } .u-navbar-fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 999; } .u-status-bar { width: 100%; } .u-navbar-inner { // display: flex; // justify-content: space-between; position: relative; // padding-bottom: 24rpx; // box-sizing: content-box; // align-items: center; } .u-back-wrap { display: flex; align-items: center; flex: 1; flex-grow: 0; padding: 14rpx 14rpx 14rpx 24rpx; height: 100%; } .u-back-text { padding-left: 4rpx; font-size: 30rpx; } .u-navbar-content-title { display: flex; align-items: center; justify-content: center; flex: 1; position: absolute; left: 0; right: 0; height: 60rpx; text-align: center; flex-shrink: 0; } .u-navbar-centent-slot { flex: 1; } .u-title { line-height: 1; font-size: 32rpx; flex: 1; } .u-navbar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; } .u-slot-content { flex: 1; display: flex; // align-items: center; height: 100%; } .u-border-bottom:after { border-bottom-width: 0px; } </style>
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
部分安卓机出现的比较严重了,自定义导航栏。启动时右边的胶囊会消失。切换后又正常了
机型:荣耀 magic2 微信版本号:7.0.19 系统版本号:10.1.0.162
机型:小米 微信版本号:7.0.19 系统版本号:10.3.10
首页代码
<template> <div class='user savepadding flex flex-direction'> <!-- 自定义头部 --> <use-navbar ref="useNavbar" class='followTop'></use-navbar> </div> </template> <script> import useNavbar from './components/use-navbar.vue' export default { components: { useNavbar, } } </script>
useNavbar组件
<template> <div class="customNavBar"> <u-navbar :background="background" class="navbar" :isBack="false" :height="navBarHeight"></u-navbar> </div> </template> <script> import unavbar from '@/components/u-navbar/u-navbar' export default { components: { unavbar }, data() { return { background: {}, navBarHeight: 84, //自定义头部高度 }; }, mounted() { let height = uni.getStorageSync('systemType') == 'IOS' ? 48 : 44 this.navBarHeight = uni.getStorageSync('isAddToDeskTop') ? height : height + uni.upx2px(72) }, }; </script> <style lang="scss"> .customNavBar { .navbar { position: relative; } } </style
unavbar 公共组件
<template> <view class=""> <view class="u-navbar" :style="[navbarStyle]" :class="{'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom}"> <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="u-navbar-inner" :style="[navbarInnerStyle]"> <view class="u-back-wrap" v-if="isBack" @tap="goBack"> <view class="u-icon-wrap"> <uni-icons type="arrowleft" :size="backIconSize" :color="backIconColor"></uni-icons> </view> <view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]"> {{backText}} </view> </view> <view class="u-navbar-content-title" v-if="title" :style="[titleStyle]"> <view class="u-title u-line-1" :style="{ color: titleColor, fontSize: titleSize + 'rpx' }"> {{title}} </view> </view> <view class="u-slot-content"> <slot></slot> </view> <view class="u-slot-right"> <slot name="right"></slot> </view> </view> </view> <!-- 解决fixed定位后导航栏塌陷的问题 --> <view class="u-navbar-placeholder" v-if="isFixed" :style="{width: '100%',height: Number(navbarHeight) + statusBarHeight + 'px'}"> </view> </view> </template> <script> // 获取系统状态栏的高度 let systemInfo = uni.getSystemInfoSync(); let menuButtonInfo = {}; menuButtonInfo = uni.getMenuButtonBoundingClientRect(); export default { name: "u-navbar", props: { animationHeight: { type: Object, default () { return { } } }, // 导航栏高度,单位px,非rpx height: { type: [String, Number], default: '' }, // 返回箭头的颜色 backIconColor: { type: String, default: '#fff' }, // 左边返回的图标 backIconName: { type: String, default: 'arrow-left' }, // 左边返回图标的大小,rpx backIconSize: { type: [String, Number], default: '40' }, // 返回的文字提示 backText: { type: String, default: '' }, // 返回的文字的 样式 backTextStyle: { type: Object, default () { return { color: '#606266' } } }, // 导航栏标题 title: { type: String, default: '' }, // 标题的宽度,如果需要自定义右侧内容,且右侧内容很多时,可能需要减少这个宽度,单位rpx titleWidth: { type: [String, Number], default: '250' }, // 标题的颜色 titleColor: { type: String, default: '#fff' }, // 标题的字体大小 titleSize: { type: [String, Number], default: 30 }, isBack: { type: [Boolean, String], default: true }, // 对象形式,因为用户可能定义一个纯色,或者线性渐变的颜色 background: { type: Object, default () { return { } } }, // 导航栏是否固定在顶部 isFixed: { type: Boolean, default: true }, // 是否显示导航栏的下边框 borderBottom: { type: Boolean, default: true }, zIndex: { type: [String, Number], default: '980' } }, data() { return { menuButtonInfo: menuButtonInfo, statusBarHeight: systemInfo.statusBarHeight }; }, computed: { // 导航栏内部盒子的样式 navbarInnerStyle() { let style = {}; // 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离 style.height = this.navbarHeight + 'px'; // // 如果是各家小程序,导航栏内部的宽度需要减少右边胶囊的宽度 // #ifdef MP let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; style.marginRight = rightButtonWidth + 'px'; // #endif return style; }, // 整个导航栏的样式 navbarStyle() { let style = {}; style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar; // 合并用户传递的背景色对象 Object.assign(style, this.background); return style; }, // 导航中间的标题的样式 titleStyle() { let style = {}; // #ifndef MP style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; // #endif // #ifdef MP // 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间,是通过绝对定位实现的 let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth + 'px'; // #endif style.width = uni.upx2px(this.titleWidth) + 'px'; return style; }, // 转换字符数值为真正的数值 navbarHeight() { return this.height ? this.height : 44; let height = systemInfo.platform == 'ios' ? 44 : 48; return this.height ? this.height : height; } }, created() {}, methods: { goBack() { uni.navigateBack(); } } }; </script> <style scoped lang="scss"> .u-navbar { width: 100%; // background:$theme-color-bg; } .u-navbar-fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 999; } .u-status-bar { width: 100%; } .u-navbar-inner { // display: flex; // justify-content: space-between; position: relative; // padding-bottom: 24rpx; // box-sizing: content-box; // align-items: center; } .u-back-wrap { display: flex; align-items: center; flex: 1; flex-grow: 0; padding: 14rpx 14rpx 14rpx 24rpx; height: 100%; } .u-back-text { padding-left: 4rpx; font-size: 30rpx; } .u-navbar-content-title { display: flex; align-items: center; justify-content: center; flex: 1; position: absolute; left: 0; right: 0; height: 60rpx; text-align: center; flex-shrink: 0; } .u-navbar-centent-slot { flex: 1; } .u-title { line-height: 1; font-size: 32rpx; flex: 1; } .u-navbar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; } .u-slot-content { flex: 1; display: flex; // align-items: center; height: 100%; } .u-border-bottom:after { border-bottom-width: 0px; } </style>
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)