category侧边栏无法滚动，上边被header覆盖
<template>
<div class="category">
<header class="g-header-container">
<category-header/>
</header>
<div class="g-content-container">
<div class="sidebar">
<category-tab/>
</div>
<div class="main"></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
}
};
</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>
-----------------------------------------------------------------------------------------------
<template>
<me-scroll :scrollbar="false">
<ul class="tab">
<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);
}
}
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
$tab-item-height: 46px;
.tab {
width: 100%;
&-item {
height: $tab-item-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: $tab-item-height;
@include ellipsis();
&:last-child {
border-bottom: none;
}
}
&-item-active {
background: none;
border-right: none;
color: #f23030;
}
}
</style>
------------------------------------------------------------------------------------------------
<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="scrollbar" 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_DOWN_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();
}
},
created() {
this.init();
},
methods: {
update() {
this.$refs.swiper && this.$refs.swiper.swiper.update();
},
scrollToTop(speed, runCallbacks) {
this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);
},
init() {
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,
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;
}
console.log(swiper.translate);
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-down-transition-end');
}, swiper.params.speed);
},
pullUpEnd() {
const swiper = this.$refs.swiper.swiper;
this.pulling = false;
this.$refs.pullUpLoading.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;
}
</style>1
收起
正在回答
2回答
同学你好，如下，这里测试没有被顶部覆盖哦，例：
且是可以滚动的，例：
这里使用360极速与谷歌测试均没有问题哦，不知道是否是同学的其他文件产生的影响，同学可以提供下其他的文件哦。或者也可以检查下是否有报错信息。也可以粘贴过来哦。
祝学习愉快！
热门框架Vue开发WebApp 18版
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星