页面被顶起设置的fixed定位无效

传播星球 (作者)

你好 能细说一下嘛

2023-11-29 14:22

喜欢技术的前端

回复 传播星球: 类似于这样

<template>  

    <view>  

        <view class="item" v-for="(item,index) in 50" :key="index">  

            {{item}}  

        </view>  

        <button class="btn" :style="{'bottom':bottom}">btn</button>  

    </view>  

</template>  



<script>  

    export default {  

        components: {  



        },  

        data() {  

            return {  

                timer: null,  

                bottom:0  

            }  

        },  

        onPageScroll(e) {  

            console.log('开始滚动')  

            this.bottom  = '-1000px'  

            clearTimeout(this.timer) //这里必须要每次滚动前 清除一次  

            // 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束  

            this.timer = setTimeout(() => {  

                console.log('结束滚动')  

                this.bottom = 0  

                //在这里实现我们的操作  

            }, 1000)  

        },  

        methods: {  



        }  

    }  

</script>  



<style>  

    .item {  

        padding: 20rpx;  

        background-color: #999;  

    }  



    .btn {  

        background-color: aquamarine;  

        position: fixed;  

        left: 0;  

        z-index: 10;  

        bottom:0;  

    }  

</style>

2023-11-29 14:39