加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > Linux > 正文

vue实现吸顶

发布时间:2020-12-14 00:22:21 所属栏目:Linux 来源:网络整理
导读:data(){ return { list:[],swiperOption: "" ,xiding : "" , // 轮播高度 SwiperHeight:‘‘ } },mounted(){ this .onload() // 获取轮播图图片的高度 setTimeout(()= { // 通过ref获取轮播dom,获取轮播的高度 console.log( this .$refs.mySwiper.$el.offse
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
            }
        },

?

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读