项目场景:
1、自定义导航头信息;
2、sticky在组件内配置在安卓有效、IOS无效的情况;
问题描述:
IOS监听机制问题导致sticky在组件内的机制失效
//导航栏吸顶效果
.bar-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 101;
}
原因分析:
1、sticky定义在组件内,占位元素在页面里,安卓及模拟器有效,IOS真机无效
解决方案:
1、配置-webkit-sticky兼容条件
2、组件在被引入页面嵌套一个元素,并添加sticky效果
<view class="bar-sticky"><Hxheader custom="true"></Hxheader></view>
<!-- <Hxheader :navigationBarStyle="navigationBarStyle" :showBack="false"></Hxheader> -->
引入自定义组件
import Hxheader from "../../components/autoheader.vue";
export default ({
components:{Hxheader}
})
自定义导航组件
<template>
<view class="bar-sticky">
<view class="status-line" :style="{height: lineHeight, background: navigationBarStyle.background || normal.background}"></view>
<view class="bar-line" :style="{background: navigationBarStyle.background || normal.background}">
<view class="bar-line container-in" :style="{background: navigationBarStyle.background || normal.background}">
<view class="bar-font bar-content" v-if="!custom">
<view class="icon-fanhui bar-back" :style="{color: navigationBarStyle.iconColor || normal.iconColor}" @click="$turnPage('1', 'navigateBack')"
v-if="showBack">
</view>
<view class="bar-title" :style="{color: navigationBarStyle.fontColor || normal.fontColor}">{{navigationBarStyle.iconText}}</view>
</view>
<view class="bar-font container-in" v-else>
<slot>
<!--自定义代码 start-->
<view class="headermodel">
<text>自定义操作</text>
</view>
<!--自定义代码 end-->
</slot>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
custom: {
type: Boolean,
default: false
}, //自定义头部,否则沿用原生的头部样式
navigationBarStyle: {
type: Object,
default: function() {
return {
background: '#FFFFFF',
fontColor: '#000000',
iconColor: '#000000',
iconText: '导航文本' //导航栏文字
}
}
}, //原生头部自定义样式
showBack: {
type: Boolean,
default: true
}, //是否显示回退图标,默认显示
},
data() {
return {
normal: {
background: '#FFFFFF',
fontColor: '#000000',
iconColor: '#000000',
}, //公用样式,个性化样式可通过传值实现
lineHeight: '' //状态栏高度
};
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
// px转换到rpx的比例
let pxToRpxScale = 750 / systemInfo.windowWidth;
let systems = {
ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
}
// 底部tabBar的高度
systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems.ktxWindowHeight // 底部tabBar的高度
this.lineHeight = systems.ktxStatusHeight + 'rpx';
this.$emit('getHeight', systems)
}
}
</script>
<style lang="less">
/*正中*/
.bar-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
//导航栏吸顶效果
.bar-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 101;
}
/*垂直居中*/
.container-in {
display: flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 44px;
.headermodel{
display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;
image{
height: 80rpx;width: 80rpx;display: block;
}
}
}
.bar-line {
height: 44px; //导航栏高度
.bar-back {
font-size: 52rpx !important;
position: absolute;
left: 30rpx;
}
.bar-title {
font-size: 32rpx;
}
}
</style>