Sticky 自定义吸顶 uniapp

• 用css的position: sticky 在iOS的webview壳子里面没有作用所以自定义一下

• 控件 offsetTop 监听页面的滚动 通过this.$refs.*.offsetTop来获取控件距离屏幕顶部的距离， 这个距离是固定的(uniapp 里面不能直接获取需要外面套一个div获取)

• 判断是否可以吸顶， 通过uniapp自带的 onPageScroll方法获取 scrollTop，这个高度不包括顶部固定的状态栏和导航栏的高度(如果没有导航栏fixed 的话可以自己试试包不包括)，如果固定距离+（状态栏 + 导航栏）高度大于吸顶控件高度， 就把控件改成 fixed布局，固定在你想要的地方

• 上面又个问题，判断的是吸顶控件的offsetTop, 但是fixed布局之后， offsetTop会变， 所以不能用需要吸顶的控件作为参照物， 在吸顶控件上面放一个1rpx的div， 用这个来判断， 就没有任何问题了

uiview控件用到了

<template>
    <view>
        <u-navbar :is-back="false" title="home"></u-navbar>
        <view ref="" class="uni-column" style="justify-content: flex-end;">
            <view style="height: 190rpx; background-color: #007AFF;"></view>
            <!-- 默认80rpx -->
            <div ref="stickyTop" style="height: 1rpx; background-color: red;"></div>
            <div :style="stickyStyle">
                <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
            </div>
        </view>
        
        <view style="height: 1000px; background-color: #007AFF;"></view>
    </view>
</template>

<script>
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
    export default {

        data() {
            return {
                list: [{
                    name: 'A'
                }, {
                    name: 'B'
                }, {
                    name: 'C'
                }],
                current: 0,
                statusBarHeight: statusBarHeight,
                needSticky: false,
                
            }
        },
        
        computed: {
            stickyStyle() {
                let style = this.needSticky ? {
                    position: 'fixed',
                    top: Number(statusBarHeight + 44) + 'px',
                    height: '44px',
                    width: '100vw'
                } : {}
                console.log(style)
                return  style
            }
        },

        onPageScroll(e) {
            //加上状态栏和导航栏高度， 不需要不用加
            var number = e.scrollTop + statusBarHeight + 44
            console.log(number)
            if (number > this.$refs.stickyTop.offsetTop) {
                this.needSticky = true
            }else{
                this.needSticky = false
            }
            // console.log(this.$refs.stickyTop.offsetTop)
            // console.log(this.$refs.sticky.offsetTop)
        },


        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

<style>
</style>