vue 返回滚动条顶部组件_vue实现返回顶部组件

当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部

src/components/scroll/index.vue

import'swiper/css/swiper.css';

import MeLoading from'components/loading';

exportdefault{

name:'Scrollbar',title:'Scrollbar'return{

pulling:false,//是否正在下拉中

pullDownText:'向下拉动会重新加载幻灯片哦''.swiper-scrollbar'true},direction:'vertical'下拉刷新时触发的事件

sliderMove:this.sliderMove,1)">一开始使用sliderMove，有bug

touchEnd:this.touchEnd,transitionEnd:this.scrollEnd滚动结束

}

},}

},props:{

recommends:{

type:[Array,Object],(){[];

}

}

},watch:{当recommends值发生改变时

recommends(){this.$refs.swiper && this.$refs.swiper.$swiper.update();更新滚动条长度

}

},methods:{

sliderMove(){if(this.pulling) return;正在下拉中，则不重复下拉

const swiper=.$refs.swiper.$swiper;this.$emit("scrolling"if(swiper.translate>0){向下拉

if(swiper.translate>100){超出规定的高度

this.$refs.pullDownLoading.s