老师，我的滚动条组件，拉不上去
来源：6-1 上拉加载更多
Syrena3447375
2020-03-19 10:03:54
我的滚动条，拉不到底怎么办
<template>
<div class="mine-scroll">
<!-- 滚动条也是用swiper写，options是固定的 -->
<swiper ref="swiper" :options="swiperOption" class="mine-scroll-container">
<!-- 滚动条中的内容 -->
<div class="mine-scroll-pull-down" v-if="pullDown">
<me-loading :text="pullDownText" inline ref="pullDownLoading"></me-loading>
</div>
<swiper-slide class="mine-scroll-slide">
<slot></slot>
</swiper-slide>
<div class="mine-scroll-pull-up" v-if="pullUp">
<me-loading :text="pullUpText" inline ref="pullDownLoading"></me-loading>
</div>
<div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</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
},
props: {
scrollbar: {
type: Boolean,
default: true
},
pullDown: {
type: Boolean,
default: false
},
pullUp: {
type: Boolean,
default: false
},
data: {
type: [Array, Object]
}
},
data() {
return {
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.updateScroll()
}
},
methods: {
updateScroll() {
this.$refs.swiper && this.$refs.swiper.swiper.updateScroll
},
//下拉距离改变文字
scroll() {
const swiper = this.$refs.swiper.swiper
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{
}
},
touchEnd() {
const swiper = this.$refs.swiper.swiper
//如果松开手的时候下拉距离超过设置的高度
if(swiper.translate > PULL_DOWN_HEIGHT) {
if(!this.pullDown) {
return
}
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)
//基础组件不加载数据，所以抛出事件告诉别人已经下拉完成，pullDownEnd恢复参数
this.$emit('pull-down', this.pullDownEnd)
}
},
pullDownEnd() {
const swiper = this.$refs.swiper.swiper
this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END)
swiper.params.virtualTranslate = false
swiper.allowTouchMove = true
swiper.setTransition(swiper.params.speed)
swiper.setTranslate(0)
}
},
components: {
MeLoading,
swiper,
swiperSlide
}
}
</script>
<style lang="scss" scoped>
.mine-scroll, .mine-scroll-container {
overflow: hidden;
height: 100%;
width: 100%;
}
.mine-scroll-slide {
height: auto;
}
.mine-scroll-pull-down {
position: absolute;
left: 0;
bottom: 100%;
width: 100%;
height: 80px;
}
.mine-scroll-pull-up {
position: absolute;
left: 0;
width: 100%;
height: 30px;
top: 100%;
}
</style>
2回答
-
好帮手慕慕子
2020-03-19
同学你好， 老师在源码中测试同学的代码是可以正常滚动的。同学可以清除浏览器缓存在测试下。
因为是在浏览器中模拟的手机模式，所以可能会存在一些误差，不用纠结，重要的是学习老师讲解的思路与代码书写。
祝学习愉快~
0 -
Syrena3447375
提问者
2020-03-19
老师啊，为什么我的滚动条有的时候可以拉到底有的时候拉不到底啊？？
0
相似问题