其它都是正常的，就是拉上去拉下来自己又回弹回去了，拉不到最底部也拉不到最顶部，拉来拉去都会是这样的
category/index.vue
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;
}
}
};
@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%;
}
tab.vue
class="tab-item"
:class="{'tab-item-active': item.id === curId}"
v-for="(item,index) in items"
:key="index"
@click="switchTab(item.id)"
>{{item.name}}
import MeScroll from 'base/scroll';
import {categoryNames} from './config';
export default {
name:'CategoryTab',
components: {
MeScroll
},
data() {
return {
curId:''
};
},
// 因为数据只需要赋值一次，所以就把数据写在methods的init()里
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)
}
}
};
@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;
}
&-active {
background: none;
border-right: none;
color: #f23030;
}
}
}
base/scroll/index.vue
// 滚动条也是使用swiper插件
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 {
components: {
swiper,
swiperSlide,
MeLoading
},
props: {
scrollbar: {
type: Boolean,
default: true
},
//这个data是接收
data: {
type: [Array, Object]
},
pullDown: {
type: Boolean,
default: false
},
pullUp: {
type: Boolean,
default: false
}
},
watch: {
data() {
this.update();
}
},
created(){
this.init();
},
methods: {
update() {
// 外部调用的api
//如果它存在的话再调用swiper下面的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_UP_TEXT_INIT;
this.swiperOption= {
direction: "vertical",
slidesPerView: "auto", //一页能看几张图片，auto是自适应
freeMode: true, //如果设置了这个大力滑可以滑很远
setWrapperSize: true, //自动给sliderwrapper设置高度
scrollbar: {
el: this.scrollbar ? ".swiper-scrollbar" : null,
hide: true //是否自动隐藏
},
on: {
sliderMove: this.scroll,
touchEnd: this.touchEnd,
transitionEnd:this.scrollEnd
}
}
},
// 内部自己使用的
scroll() {
//this.$refs.swiper是通过refs找到这个组件，
//后面的.swiper就是找到它组件的对象，swiper里又很多的属性
const swiper = this.$refs.swiper.swiper;
// 传什么时候显示返回顶部按钮，什么时候隐藏
this.$emit('scroll',swiper.translate,this.$refs.swiper.swiper);
if (this.pulling) {
return;
}
if (swiper.translate > 0) {
//大于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")); //判断是否到达上拉的触发条件，//abs的意思是绝对值
if (isPullUp) {
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
} else {
this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
}
}
},
//滑动停止后触发的事件
scrollEnd(){
this.$emit('scroll-end',this.$refs.swiper.swiper.translate,this.$refs.swiper.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); //拖过头了就移动到100的位置
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.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); //回到0的位置
console.log(swiper.params)
// 下拉回弹后显示header
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;
}
}
};
.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;
}
)
