vue實現吸頂


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
            }
        },

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM