pointsMall/src/components/AppSidebar1.vue

<template>
    <div class="index-nav" :class="{'index-nav-top':isActive}">
        <nav class="side-navigator-wrap">
            <div v-for="(item,index) in sideBarList" :key="index" class="nav-item-wrap">
                <div class="nav-item-content" :class="{ active: item.checked }">
                    <router-link :to="item.path" class="nav-item">
                        <!-- <i :class="item.icon"></i> -->
                        <span class="nav-item-text">{{ item.name }}</span>
                    </router-link>
                </div>
            </div>
        </nav>
    </div>
    
</template>
<script>
export default {
  name: 'AppSidebar1',
  data() {
    return {
        sideBarList:[
            {
                value:'present',
                name:'当前积分',
                path:'/pointsRank/present',
                icon:'icon-mall-shouye',
                checked:false,
            },
            {
                value:'history',
                name:'获取总积分',
                path:'/pointsRank/history',
                icon:'icon-mall-jifenshangcheng',
                checked:false,
            },
        ],
        isActive:false,
    };
  },
  methods:{
    getRoute(){
        var path = this.$route.path;
        this.sideBarList.forEach(item => {
            if(path.indexOf(item.value) != -1){
                item.checked = true;
            } else{
                item.checked = false;
            }     
        });
    },
    // 保存滚动值，这是兼容的写法
    handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop >= 80){
            this.isActive = true
        }else{
            this.isActive = false
        }
    },
  },
  watch: {
    $route:'getRoute'
  },
  created() {
    this.getRoute();
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },

  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
.index-nav{
  width: 180px;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    margin-right: 20px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 4px;
    background-color: #fff;
    max-height: calc(100vh - 101px);
    /* overflow-x: hidden; */
}
.index-nav-top{
    top: 20px;
    max-height: calc(100vh - 40px);
}
li a {
    font-weight: bold;
    color: #515767;
}

li a.router-link-active {
    color: #1e80ff;
}
.side-navigator-wrap{
    min-width: 180px;
    box-sizing: border-box;
    padding: 8px;
    font-size: 16px;
    color: #515767;
}
.nav-item-wrap{
    display: flex;
    flex-direction: column;
}
.nav-item-content{
    line-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.active{
    background-color: #eaf2ff;
    color: #1e80ff;
    font-weight: 500
}
.nav-item{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 10px 17px;
}
.nav-item i{
    vertical-align: middle;
    margin-right: 12px;
}
.nav-item-text{
    vertical-align: middle;
    position: relative;
}
</style>