微信小程序IOS & sticky 兼容写法

项目场景：

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>