vue实现吸顶

• Z时代
• 2024-01-10
• 分类：综合

data(){
        return{
            list:[],
            swiperOption:"",
            xiding : "",
            // 轮播高度
            SwiperHeight:''
        }
    },
    mounted(){
        this.onload()
        // 获取轮播图图片的高度
        setTimeout(()=> {
            // 通过ref获取轮播dom，获取轮播的高度
            console.log(this.$refs.mySwiper.$el.offsetHeight)
            this.SwiperHeight = this.$refs.mySwiper.$el.offsetHeight
        },2000)
        // 监听滑动事件
        window.onscroll = this.handleScroll
    },
    destroyed(){
        window.onscroll = null; //清除滑动事件绑定
        },
    methods:{
        handleScroll(){
            // 获取屏幕滑动的高度
            console.log(document.documentElement.scrollTop)
            // 滑动高度 > 轮播dom高度  吸顶
            if(document.documentElement.scrollTop > this.SwiperHeight){
                // 吸顶
                this.xiding = true
            }else{
                // 取消吸
                this.xiding = false
            }
        },

以上是 vue实现吸顶 的全部内容， 来源链接： utcz.com/z/380884.html