tab.vue

<template>
   <me-scroll>
     <ul class="tab" :scrollbar="false">
       <li class="tab-item"
:class="{'tab-item-active':item.id === curId}"
v-for="(item, index) in items"
:key="index"
@click="switchTab(item.id)"
>{{item.name}}
       </li>
     </ul>
   </me-scroll>
</template>

<script>
import MeScroll from 'base/scroll';
import {categoryNames} from './config';
export default {
   name: 'CategoryTab',
components: {
     MeScroll
   },
data() {
     return {
       curId: ''
};
},
created() {
     this.init();
this.switchTab(this.items[0].id);
},
methods: {
     init() {
       this.items = categoryNames;
},
switchTab(id) {
       if (this.curId === id) {
         return;
}
       this.curId = id;
this.$emit('switch-tab', id);
},
updateScroll() {
       this.$refs.scroll && this.$refs.scroll.update();
}
   }
 };
</script>

<style lang="scss" scoped>
@import "../../assets/scss/_mixins.scss";
$tab-item-height: 46px;
.tab{
   width: 100%;
/*margin-top: 50px;*/

&-item{
     height: $tabbar-height;
background-color: #fff;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
color: #080808;
font-size: $font-size-l;
font-weight: bold;
text-align: center;
line-height: $tabbar-height;
     @include ellipsis();

&:last-child{
       border-bottom: none;
}
   }

   &-item-active{
     background: none;
border-right: none;
color: #f23030;
}
 }
</style>

category/index.vue

<template>
 <div>
     <div class="category">
       <header class="g-header-container">
         <category-header/>
       </header>
       <div class="g-content-container">
         <div class="sidebar">
           <category-tab @switch-tab="getCurrentId"/>
         </div>
         <div class="main">
           <category-content :curId="curId"/>
         </div>
       </div>
     </div>
 </div>
</template>

<script>
import CategoryHeader from './header';
import CategoryTab from './tab';
import CategoryContent from './content';
export default {
   name: 'Category',
components: {
     CategoryHeader,
CategoryTab,
CategoryContent
   },
data() {
     return {
       curId: ''
};
},
methods: {
     getCurrentId(id) {
       this.curId = id;
}
   }
 };
</script>

<style lang="scss" scoped>
@import "../../assets/scss/_mixins.scss";
.category{
   overflow: hidden;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
 .g-content-container{
   display: flex;
/*height: 617px;*/
}
 .sidebar{
   width: 80px;
height: 100%;
}

 .main{
   flex: 1;
height: 100%;
}
</style>

_container.sass

@import "mixins";

.g-container{
 overflow: hidden;
 position:relative;
 width: 100%;
 max-width: 640px;
 min-width: 320px;
 height: 100%;
 margin:0 auto;
}

.g-view-container{
 height: 100%;
 padding-bottom: $tabbar-height;

}

.g-content-container {
 height: 100%;
 padding-top: $navbar-height;
}

.g-header-container{
 position:absolute;
 top: 0;
 left: 0;
 z-index: $navbar-z-index;
 width: 100%;
}

.g-footer-container{
 position:absolute;
 left: 0;
 bottom: 0;
 z-index: $tabbar-z-index;
 width: 100%;
 box-shadow:0 0 10px 0 hsla(0, 6%, 58%, 0.6);
}

.g-backtop-container{
 position: absolute;
 z-index: $backtop-z-index;
 right: 10px;
 bottom:$tabbar-height+10px;
}

base/scroll/index.vue

<template>
 <swiper :options="swiperOption" ref="swiper">
   <div class="mine-scroll-pull-down" v-if="pullDown">
     <me-loading :text="pullDownText" inline ref="pullDownLoading"/>
   </div>
   <swiper-slide>
     <slot></slot>
   </swiper-slide>
   <div class="mine-scroll-pull-up" v-if="pullUp">
     <me-loading :text="pullUpText" inline ref="pullUpLoading"/>
   </div>
   <div class="swiper-scrollbar" v-if="scroll" slot="scrollbar"></div>
 </swiper>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper';
import MeLoading from 'base/loading';
import {
   PULL_DOWN_HEIGHT,
PULL_DOWN_TEXT_INIT,
PULL_DOWN_TEXT_START,
PULL_DOWN_TEXT_ING,
PULL_DOWN_TEXT_END,
PULL_UP_HEIGHT,
PULL_UP_TEXT_INIT,
PULL_UP_TEXT_START,
PULL_UP_TEXT_ING,
PULL_UP_TEXT_END
 } from './config';
export default {
   name: 'MeScroll',
components: {
     swiper,
swiperSlide,
MeLoading
   },
props: {
     scrollbar: {
       type: Boolean,
default: true
},
data: {
       type: [Array, Object]
     },
pullDown: {
       type: Boolean,
default: false
},
pullUp: {
       type: Boolean,
default: false
}
   },
// data() {
   //   return {
   //     pulling: false,
   //     pullDownText: PULL_DOWN_TEXT_INIT,
   //     pullUpText: PULL_UP_TEXT_INIT,
   //     swiperOption: {
   //       direction: 'vertical',
   //       slidesPerView: 'auto',
   //       freeMode: true,
   //       setWrapperSize: true,
   //       scrollbar: {
   //         el: this.scrollbar ? '.swiper-scrollbar' : null,
   //         hide: true
   //       },
   //       on: {
   //         sliderMove: this.scroll,
   //         touchEnd: this.touchEnd,
   //         transitionEnd: this.scrollEnd
   //       }
   //     }
   //   };
   // },
watch: {
     data() {
       this.update();
console.log(this.update());
}
   },
created() {
     this.init();
},
methods: {
     update() {
       this.$nextTick(() => {
         this.$refs.swiper && this.$refs.swiper.swiper.update();
});
},

scrollToTop(speed, runCallbacks) {
       this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);
},
init() {
       /**
        * @param:direction (滚动条方向)
        * @param:slidesPerView(一页中能看到几张图片)
        * @param:freeMode(自由模式,可以滚动任意位置)
        * @param:setWrapperSize(设置页面的高度)
        * @param:scrollbar(判断scrollbar是非存在)
        * @param:hide(是否自动隐藏,不滑动的情况下,滚动条会自动隐藏)
        */
this.pulling = false;
this.pullDownText = PULL_DOWN_TEXT_INIT;
this.pullUpText = PULL_DOWN_TEXT_INIT;// 没有
this.swiperOption = {
         direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
setWrapperSize: true,
dragSize: 'auto',
scrollbar: {
           el: this.scrollbar ? '.swiper-scrollbar' : null, // 再看看!!!!
hide: true
},
on: {
           sliderMove: this.scroll,
touchEnd: this.touchEnd,
transitionEnd: this.scrollEnd // 向上滑动时监听scrollEnd
}
       };
},
scroll() {
       const swiper = this.$refs.swiper.swiper;
// 监控什么时候出现回到顶部
this.$emit('scroll', swiper.translate, this.$refs.swiper.swiper);
if (this.pulling) {
         return;
}

       if (swiper.translate > 0) { // 下拉
if (!this.pullDown) {
           return;
}
         if (swiper.translate > PULL_DOWN_HEIGHT) {
           this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
} else {
           this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
}
       } else if (swiper.isEnd) { // 上拉
if (!this.pullUp) {
           return;
}
         const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > parseInt(swiper.$wrapperEl.css('height'));
if (isPullUp) {
           this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
} else {
           this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
}
       }
     },
scrollEnd() {
       const swiper = this.$refs.swiper.swiper;

this.$emit('scroll-end', swiper.translate, swiper, this.pulling);
},
touchEnd() {
       if (this.pulling) {
         return;
}
       const swiper = this.$refs.swiper.swiper;

if (swiper.translate > PULL_DOWN_HEIGHT) {
         if (!this.pullDown) {
           return;
}
         this.pulling = true;
swiper.allowTouchMove = false; // 禁止触摸
swiper.setTransition(swiper.params.speed); // 找到初始的速度设置速度
swiper.setTranslate(PULL_DOWN_HEIGHT); // 禁止触摸
swiper.params.virtualTranslate = true; // 定住不给回弹
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);
this.$emit('pull-down', this.pullDownEnd);
} else if (swiper.isEnd) { // 底部
const totalHeight = parseInt(swiper.$wrapperEl.css('height'));
const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;

if (isPullUp) { // 上拉
if (!this.pullUp) {
             return;
}
           this.pulling = true;
swiper.allowTouchMove = false; // 禁止触摸
swiper.setTransition(swiper.params.speed);
swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));
swiper.params.virtualTranslate = true; // 定住不给回弹
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);
this.$emit('pull-up', this.pullUpEnd);
}
       }
     },
pullDownEnd() {
       const swiper = this.$refs.swiper.swiper;
this.pulling = false;
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);
swiper.params.virtualTranslate = false;
swiper.allowTouchMove = true;
swiper.setTransition(swiper.params.speed);
swiper.setTranslate(0);
setTimeout(() => {
         this.$emit('pull-dowm-transition-end');
}, swiper.params.speed);
},
pullUpEnd() {
       const swiper = this.$refs.swiper.swiper;
this.pulling = false;
this.$refs.pullDownLoading.setText(PULL_UP_TEXT_END);
swiper.params.virtualTranslate = false;
swiper.allowTouchMove = true;
}
   }
 };
</script>

<style lang="scss" scoped>
.swiper-container {
   overflow: hidden;
width: 100%;
height: 100%;
};

.swiper-slide {
   height: auto;
}
 .mine-scroll-pull-up,
.mine-scroll-pull-down {
   position: absolute;
left: 0;
width: 100%;
}
 .mine-scroll-pull-down {
   bottom: 100%;
height: 80px;
}

 .mine-scroll-pull-up {
   top: 100%;
height: 30px;
}

 .swiper-slide {
   overflow: auto;
}

</style>

老师,我项目已经写完了,但是现在分类页的滚动条无法滚动,我在category/index.vue下面加了.g-content-container{
 display: flex;
 /*height: 617px;*/
}

加了这个可以实现滚动,但是并不是所有的屏幕都是617px的高度,所以想要其他的解决办法

1. 如果按照我的代码写的话,左侧tab的滚动条就会显示出来,(老师说应该是隐藏的,怎么实现呢?)请问怎么解决?

2. g-content_container的高度为什么会是内容的高度呢?(而不是屏幕显示的高度呢?)