swiper怎么让不会回弹,为什么我的滚动条拉上拉下都会回弹呢？
其它都是正常的，就是拉上去拉下來自己又回彈回去了，拉不到最底部也拉不到最頂部，拉來拉去都會是這樣的
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;
}
總結
以上是生活随笔為你收集整理的swiper怎么让不会回弹,为什么我的滚动条拉上拉下都会回弹呢？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java model 中文乱码,java
- 下一篇： matlab教程点语言,编程语言 /