收藏
回答

微信小程序 安卓手机头部胶囊不见了?

每次进小程序 首页 头部的胶囊都看不见 切换页面再回到首页就出现了 头部用的自定义导航栏 而且只有安卓手机会出现这个问题 苹果手机显示正常 开发者工具 基础调试库用的 2.13.1

回答关注问题邀请回答
收藏

3 个回答

  • 咸鱼不咸
    咸鱼不咸
    2020-10-22

    部分安卓机出现的比较严重了,自定义导航栏。启动时右边的胶囊会消失。切换后又正常了

    2020-10-22
    有用
    回复 1
    • Are You With Me
      Are You With Me
      2020-10-24
      有解决方法吗?
      2020-10-24
      回复
  • 一叶之秋
    一叶之秋
    2020-10-10

    机型:荣耀 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>
    
    
    
    2020-10-10
    有用
    回复
  • Riven.
    Riven.
    2020-10-09

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-10-09
    有用
    回复
登录 后发表内容
问题标签