vue之吸顶效果实现

vue的吸顶效果

确定吸顶元素

提取部分有用的代码

 	  <div class="shop-list" ref="shopList">
            <div class="bg-color"></div>
            <div class="page_swiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>1</van-swipe-item>
                    <van-swipe-item>2</van-swipe-item>
                    <van-swipe-item>3</van-swipe-item>
                    <van-swipe-item>4</van-swipe-item>
                </van-swipe>
            </div>
            <!-- 封装提取部分 商品 -->
            <tabShopList :searchKey="searchKey" :isTabFixed="isTabFixed"></tabShopList>
        </div>

事件处理函数

 	scroll() {
            console.log("吸顶高度元素=", this.$refs.shopList);
            console.log("吸顶高度值=", this.$refs.shopList.scrollTop);
             // 获取某个元素的offsetTop
            if(this.$refs.shopList.scrollTop > 160){
                this.isTabFixed = true
            }else{
                this.isTabFixed = false
            }
        }

  mounted() {
        // 监听滚动事件
        let _this = this
        _this.$refs.shopList.addEventListener('scroll', _this.scroll,true)
    },
    // 注意销毁滚动事件
    deactivated(){
    	let _this = this
        document.removeEventListener("scroll", _this.scroll);
    },

全部代码如下：

<template>
    <div class="page page-flex new-project-select">
        <van-nav-bar fixed class="active-color">
            <template #left>
                <van-icon name="arrow-left" size="26" color="#fff"  @click="onClickLeft"/>
            </template>
            <template #title>
                <div class="title flex-center">
                    <img src="../../../assets/images/tradeCoin/new-product-selection.png" alt="">
                </div>
            </template>
            <template #right>
                <div class="share">分享</div>
            </template>
        </van-nav-bar>

        <div class="shop-list" ref="shopList">
            <div class="bg-color"></div>
            <div class="page_swiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>1</van-swipe-item>
                    <van-swipe-item>2</van-swipe-item>
                    <van-swipe-item>3</van-swipe-item>
                    <van-swipe-item>4</van-swipe-item>
                </van-swipe>
            </div>
            <!-- 封装提取部分 商品 -->
            <tabShopList :searchKey="searchKey" :isTabFixed="isTabFixed"></tabShopList>
        </div>
    </div>
</template>

<script>

import tabShopList from "../components/tabShopList"
import {shoppingSpecial, singleShoppingSpecial} from "@/api/advShopping"

export default {
    name: "newProductSelect",
    components: {tabShopList},
    data() {
        return {
            isTabFixed:false,
            searchKey:'',
        };
    },
    methods: {
        onClickLeft() {
            // Toast('返回');
            if (this.isBackClose) {
                try {
                    window.native.onFinish();
                } catch (e) {}
            } else {
                try {
                    window.native.onBack();
                } catch (e) {
                    this.$router.go(-1);
                }
            }
        },
        async getShoppingData(value){
            let params = {
                topicId: value
            }
            let res = await shoppingSpecial(params)
            console.log(res)
        },
        scroll() {
            console.log("吸顶高度元素=", this.$refs.shopList);
            console.log("吸顶高度值=", this.$refs.shopList.scrollTop);
            if(this.$refs.shopList.scrollTop > 160){
                this.isTabFixed = true
            }else{
                this.isTabFixed = false
            }
        }
    },

    created() {
        // // 原生路径拼接 判断那个专题页
        // function getQueryString(){
        //     var obj={},urlStr='';
        //     (urlStr=window.location.search.substr(1))||(urlStr=window.location.hash.split('?')[1])
        //     urlStr.split(/&/g).forEach(function(item){
        //         obj[(item=item.split('='))[0]]=item[1];
        //     })
        //     return obj
        // }
       this.getShoppingData('2012311037230000057')
    },
    mounted() {
        // 监听滚动事件
        let _this = this
        this.$refs.shopList.addEventListener('scroll', _this.scroll,true)
        // // 必须知道滚动多少时，开始滚动吸顶效果
        // // 获取某个元素的offsetTop
        // console.log("吸顶高度",this.$refs.tabChange.offsetTop);
        // // 获取某个组件的offsetTop ，所有组件都有一个属性 $el 用于获取组件的元素
        // // 注意: 获取到的offsetTop 会受到页面元素的影响 比如图片等
        // // console.log(this.$refs.tabChange.$el.offsetTop)
        // this.tabOffsetTop = this.$refs.tabChange.offsetTop;
    },
    // 注意销毁滚动事件
    // beforeDestroy() {
    //     let _this = this
    //     window.removeEventListener("scroll", _this.scroll);
    // },
    // destroyed(){
    //     let _this = this
    //     window.removeEventListener('scroll', _this.scroll);//监听页面滚动事件
    // },
    deactivated(){
        document.removeEventListener("scroll", this.scroll);
    },
    // 保存位置
    beforeRouteLeave (to, from, next) {
        sessionStorage.shopAskPositon =
            this.$refs.shopList.scrollTop
            // this.$refs.scroller &&
            // this.$refs.scroller.getPosition() &&
            // this.$refs.scroller.getPosition().top;
        next();
    },
    beforeRouteEnter (to, from, next) {
        console.log(from)
        if (!sessionStorage.shopAskPositon || from.name !== 'tradeDetail') {
            //当前页面刷新不需要切换位置
            sessionStorage.shopAskPositon = 0;
            next(vm => {
                vm.isTabFixed = false
            });
        } else {
            next(vm => {
                if (vm && vm.$refs.shopList) {
                //通过vm实例访问this
                setTimeout(function() {
                    vm.$refs.shopList.scrollTo(0, sessionStorage.shopAskPositon, false);
                }, 0); //同步转异步操作
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.title{
    position: relative;
    width: 2rem;
    height: 0.8rem;
    img{
        width: 2rem;
        height: .49rem;
    }
    // &:after {
    //     position: absolute;
    //     content: "\e62b";
    //     font-family: "iconfont" !important;
    //     font-style: normal;
    //     -webkit-font-smoothing: antialiased;
    //     -moz-osx-font-smoothing: grayscale;
    //     right: 0;
    //     color: #333;
    //     font-size: 0.5rem;
    //     top: 0.04rem;
    // }
}
.bg-color{
    position: absolute;
    // top: 0;
    width: 100%;
    height: 2.2rem;
    background-image: linear-gradient(to bottom, #FF5D00 0%,#FF4500 100%);
    border-radius: 0 0 0.3rem 0.3rem;
}
.page_swiper {
    margin: .24rem auto 0;
    width: 7.02rem;
    height: 3rem;
    background: #fff;
}
.my-swipe {
    width: 100%;
    height: 100%;
    border-radius: 0.2rem;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 100%;
    line-height: 1;
    /* line-height: 150px; */
    text-align: center;
    background-color: #39a9ed;
}

.shop-list{
    width: 100%;
    position: absolute;
    top: 0.92rem;
    bottom: 0;
    overflow-y: scroll;
}
// .new-project-select .active-color{
//     background: #fff!important;
// }
</style>

<style lang="scss">
.new-project-select .van-nav-bar {
    // background: linear-gradient(to bottom, #FF5D00 0%,#FF4500 100%)!important;
    background: #FF5D00!important;
} 

.new-project-select  .van-hairline--bottom::after{
    border-bottom-width: 0;
}
</style>