滚动条的问题无法正确滚动

scorll.vue

<template>

  <swiper :options="swiperOption" class="swiper-containter" ref="swiper">

    <div class="pull-down" v-if="pulldown">

      <Myloding :text="dwonlodingtext" inline ref="pullDownLoding"></Myloding>

    </div>

    <swiperSlide class>

      <slot></slot>

    </swiperSlide>

    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

    <div class="pull-up" v-if="pullup">

      <Myloding :text="uplodingtext" inline ref="pullUpLoading" :showon="'on'"></Myloding>

    </div>

  </swiper>

</template>

<script>

import { swiper, swiperSlide } from "vue-awesome-swiper";

import {

  PUlldwon_initText,

  PUlldwon_changeText,

  PUlldwon_endText,

  PUlldwon_startText,

  PUlldwon_height

} from "./config";

import {

  PULL_UP_HEIGHT,

  PULL_UP_TEXT_INIT,

  PULL_UP_TEXT_START,

  PULL_UP_TEXT_ING,

  PULL_UP_TEXT_END

} from "./config";

import Myloding from "base/loding";

export default {

  components: {

    swiper,

    swiperSlide,

    Myloding

  },

  props: {

    scrollbar: {

      type: Boolean,

      default: true

    },

    recommend: {

      type: [Array, Object]

    },

    pulldown: {

      type: Boolean,

      default: false

    },

    pullup: {

      type: Boolean,

      default: false

    }

  },

  data() {

    return {};

  },

  created() {

    this.init();

  },

  //监听recommend的变化，变化的时候执行函数

  watch: {

    recommend() {

      this.updata();

    }

  },

  methods: {

    init() {

      (this.ispulling = false),

        (this.dwonlodingtext = PUlldwon_initText),

        (this.uplodingtext = PULL_UP_TEXT_INIT),

        (this.swiperOption = {

          direction: "vertical", //垂直方向

          slidesPerView: "auto", //一页能看到多少，自适应

          freeMode: true, //自由模式。移动的时候

          setWrapperSize: true, //计算出wrap的高度

          scrollbar: {

            el: this.scrollbar ? ".swiper-scrollbar" : null,

            hide: true

          },

          /* 触发事件 */

          on: {

            sliderMove: this.scroll,

            touchEnd: this.touchEnd,

            transitionEnd: this.transitionEnd

          }

        });

    },

    /* api */

    updata() {

      this.$refs.swiper && this.$refs.swiper.swiper.update();

    } /* 对外暴露的更新方法 */,

    socrollTo(speed, runCallbacks) {

      this.$refs.swiper &&

        this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);

      /* 返回到第几个幻灯片 */

    } /* 返回顶部 */,

    /* 滚动事件 */

    scroll() {

      if (this.ispulling) {

        return;

      }

      const swiper = this.$refs.swiper.swiper;

      this.$emit("scroll", swiper.translate, swiper, this.ispulling);

      /* 上拉 */

      if (swiper.translate > 0) {

        if (!this.pulldown) {

          return;

        }

        if (swiper.translate > PUlldwon_height) {

          this.$refs.pullDownLoding.setText(PUlldwon_startText);

        } else {

          this.$refs.pullDownLoding.setText(PUlldwon_initText);

        }

      }

      //下拉

      else if (swiper.isEnd) {

        if (!this.pullup) {

          return;

        }

        this.$refs.pullUpLoading.setshow();

        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);

        }

      }

    },

    /* 移动结束的事件 */

    transitionEnd() {

      const swiper = this.$refs.swiper.swiper;

      this.$emit("scroll-end", swiper.translate, swiper, this.ispulling);

    },

    /* 松手后的事件 */

    touchEnd() {

      const swiper = this.$refs.swiper.swiper;

      //整个swiper组件的高度

      const totalHeight = parseInt(swiper.$wrapperEl.css("height"));

      const isPullUp =

        Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT >

        totalHeight;

      if (this.ispulling) {

        return;

      }

      /* 达到上拉刷新的程度 */

      if (swiper.translate > PUlldwon_height) {

        if (!this.pulldown) {

          return;

        }

        this.ispulling = true;

        swiper.allowTouchMove = false; //禁止触摸

        swiper.setTransition(swiper.params.speed); //设置动画速度

        swiper.setTranslate(PUlldwon_height); //回到可以刷新的高度

        swiper.params.virtualTranslate = true; // 定住不给回弹

        this.$refs.pullDownLoding.setText(PUlldwon_changeText);

        this.$emit("pull-down", this.pullDownEnd); // 触发一个事件

      }

      /* 达到下拉的程度 */

      if (isPullUp) {

        if (!this.pullup) {

          return;

        }

        this.ispulling = 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.ispulling = false;

      swiper.allowTouchMove = true;

      swiper.params.virtualTranslate = false;

      swiper.setTransition(swiper.params.speed);

      setTimeout(() => {

        this.$emit("pull-down-transition-end");

      }, swiper.params.speed);

      swiper.setTranslate(0);

      this.$refs.pullDownLoding.setText(PUlldwon_endText);

    },

    /* 下拉结束发生的事件 */

    pullUpEnd() {

      this.ispulling = false;

      const swiper = this.$refs.swiper.swiper;

      const totalHeight = parseInt(swiper.$wrapperEl.css("height"));

      this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);

      swiper.allowTouchMove = true;

      swiper.params.virtualTranslate = false;

      swiper.setTransition(swiper.params.speed);

      /* swiper.setTranslate(-(totalHeight - swiper.height)); */

    },

    /* loading的图标隐藏 */

    loadingoff() {

      this.$refs.pullUpLoading.setoff();

    }

  }

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.swiper-container {

  overflow: hidden;

  height: 100%;

  width: 100%;

}

.swiper-slide {

  height: auto;

}

.pull-down {

  position: absolute;

  left: 0;

  bottom: 100%;

  height: 80px;

  width: 100%;

}

.pull-up {

  position: absolute;

  left: 0;

  top: 100%;

  height: 50px;

  width: 100%;

}

</style>

tar.vue

<template>

  <MeScroll :scrollbar="false">

    <ul v-for="(item,index) in category" :key="index" class="tab">

      <li

        @click="switchId(item.id)"

        class="tab-item"

        :class="{'tab-item-active':item.id==curId}"

      >{{item.name}}</li>

    </ul>

  </MeScroll>

</template>

<script>

import MeScroll from "base/scroll";

import { categoryNames } from "./config";

export default {

  name: "CategoryTab",

  components: {

    MeScroll

  },

  data() {

    return {

      curId: ""

    };

  },

  created() {

    this.init();

    this.switchId(this.category[0].id);

  },

  methods: {

    init() {

      this.category = categoryNames;

    },

    switchId(Id) {

      if (this.curId == Id) {

        return;

      }

      this.curId = Id;

      this.$emit("switch-id", Id);

    }

  }

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.tab {

  width: 100%;

  &-item {

    height: $tab-item-height;

    background-color: #fff;

    color: #080808;

    font-size: $font-size-l;

    @include flex-center();

    font-weight: bold;

    border-right: 1px solid $border-color;

    border-bottom: 1px solid $border-color;

    line-height: $tab-item-height;

  }

  &:last-child {

    border-bottom: none;

  }

  &-item-active {

    background: none;

    border-right: none;

    color: #f23030;

  }

}

</style>

index.vue

<template>

  <div class="category">

    <header class="g-header-container">

      <CategoryHeader />

    </header>

    <div class="g-content-container">

      <div class="sidebar">

        <CategoryTab></CategoryTab>

      </div>

      <div class="main"></div>

    </div>

  </div>

</template>

<script>

import CategoryHeader from "./header";

import CategoryTab from "./tab";

import CategoryContent from "./content";

export default {

  components: {

    CategoryHeader,

    CategoryTab,

    CategoryContent

  }

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.category {

  overflow: hidden;

  width: 100%;

  height: 100%;

  background-color: $bgc-theme;

}

.g-content-container {

  display: flex;

}

.sidebar {

  width: 80px;

  height: 100%;

}

.main {

  flex: 1;

  height: 100%;

}

</style>