vue实现返回顶部组件
程序员文章站
2022-06-24 21:01:16
当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部 效果图 src/components/scroll/index.vue
当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部
效果图
src/components/scroll/index.vue
<template>
<!-- 通过ref可以获取到dom对象 -->
<swiper class="swiper" :options="swiperoption" ref="swiper">
<div class="mine-scroll-pull-down">
<me-loading :text="pulldowntext" inline ref="pulldownloading" />
</div>
<swiper-slide>
<!-- 所有内容放在插槽里 -->
<slot></slot>
</swiper-slide>
<div class="mine-scroll-pull-up">
<me-loading :text="pulluptext" inline ref="pulluploading" />
</div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
import { swiper, swiperslide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import meloading from 'components/loading';
export default {
name: 'scrollbar',
title: 'scrollbar',
components: {
swiper,
swiperslide,
meloading
},
data() {
return {
pulling:false,//是否正在下拉中
pulldowntext:'向下拉动会重新加载幻灯片哦',
pulluptext:'向上拉动会加载更多哦',
swiperoption: {
scrollbar: {
el: '.swiper-scrollbar',
hide: true
},
direction:'vertical',
slidesperview:'auto',
freemode:true,
setwrappersize:true,
on:{//下拉刷新时触发的事件
slidermove:this.slidermove,//一开始使用slidermove，有bug
touchend:this.touchend,
transitionend:this.scrollend//滚动结束
}
},
}
},
props:{
recommends:{
type:[array,object],
default(){
return [];
}
}
},
watch:{//当recommends值发生改变时
recommends(){
this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滚动条长度
}
},
methods:{
slidermove(){
if(this.pulling) return;//正在下拉中，则不重复下拉
const swiper=this.$refs.swiper.$swiper;
this.$emit("scrolling",swiper.translate,swiper);
if(swiper.translate>0){//向下拉
if(swiper.translate>100){//超出规定的高度
this.$refs.pulldownloading.settext("开始下拉...");
}else{
this.$refs.pulldownloading.settext("向下拉动会重新加载幻灯片哦");
}
}else if(swiper.isend){//上拉
//是否达到上拉的触发条件
//swiper的位移加上swiper的高度（617px）-50px的值如果大于当前内容高度
//swiper.translate这个属性可以获取到wrapper的位移，其实可以理解为滚动条滚动的距离
//swiper.height这个属性获取swiper容器的高度， 也就是显示区域的高度
//50px是我们设置的一个值。为了让页面不是到达最低部的时候，可以提前加载内容
//parseint(swiper.$wrapperel.css('height'))是wrapper的html元素的height属性， 也就是所有内容的高度
const ispullup=math.abs(swiper.translate)+swiper.height-50 > parseint(swiper.$wrapperel.css('height'));
if(ispullup){//开始上拉
this.$refs.pulluploading.settext("开始上拉");
}else{//保持初始化
this.$refs.pulluploading.settext('向上拉动会加载更多哦');
}
}
},
touchend(){
if(this.pulling) return;//正在下拉中，则不重复下拉
const swiper=this.$refs.swiper.$swiper;
if(swiper.translate>100){
this.pulling=true;//正在下拉中
swiper.allowtouchmove=false;//禁止触摸
swiper.settransition(swiper.params.speed);//设置初始速度
swiper.settranslate(100);//移动到设定的位置（拖动过度时回到设置的位置）
swiper.params.virtualtranslate=true;//定住不给回弹
this.$refs.pulldownloading.settext("正在下拉中...");//设置正在刷新中的文字
this.$emit("pull-down",this.pulldownend);//触发消息，传递结束下拉的函数
}else if(swiper.isend){//上拉
//是否达到上拉的触发条件
const ispullup=math.abs(swiper.translate)+swiper.height-30>parseint(swiper.$wrapperel.css('height'));
if(ispullup){//开始上拉
this.pulling=true;
swiper.allowtouchmove=false;//禁止触摸
swiper.settransition(swiper.params.speed);//设置初始速度
swiper.settranslate(-(parseint(swiper.$wrapperel.css('height'))+50-swiper.height));//超过拉动距离时回弹
swiper.params.virtualtranslate=true;//定住不给回弹
this.$refs.pulluploading.settext("正在上拉中...");//设置正在刷新中的文字
this.$emit("pull-up",this.pullupend);//触发消息，传递结束下拉的函数
}
}
},
pulldownend(){
const swiper=this.$refs.swiper.$swiper;
this.pulling=false;//下拉结束
this.$refs.pulldownloading.settext("下拉结束");//设置加载结束后的文字
swiper.allowtouchmove=true;//可以触摸
swiper.settransition(swiper.params.speed);//设置初始速度
swiper.params.virtualtranslate=false;//可以回弹
swiper.settranslate(0);//移动到最初的位置
this.$emit("pulldown-end");
},
pullupend(){
const swiper=this.$refs.swiper.$swiper;
this.pulling=false;
this.$refs.pulluploading.settext("上拉结束");//设置加载结束后的文字
swiper.allowtouchmove=true;//可以触摸
swiper.params.virtualtranslate=false;//可以回弹
},
scrolltop(){
this.$refs.swiper.$swiper.slideto(0);//回到顶部
},
scrollend(){
this.$emit("scroll-end",this.$refs.swiper.$swiper.translate,this.$refs.swiper.$swiper);
}
}
}
</script>
<style lang="scss" scoped>
.swiper-container{
width:100%;
height:100%;
overflow:hidden;
}
.swiper-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;
top:100%;
width:100%;
height:30px;
}
</style>
scr/components/backtop/index.vue
<template>
<transition name="mine-backtop">
<a href="javascript:;" class="mine-backtop" v-show="visible" @click="backtotop">
<i class="iconfont icon-backtop"></i>
</a>
</transition>
</template>
<script>
export default {
name:"mebacktop",
props:{
visible:{
type:boolean,
default:false
}
},
methods:{
backtotop(){
this.$emit("backtop");//基础组件，与业务无关，具体实现去页面里
}
}
}
</script>
<style lang="scss" scoped>
.mine-backtop{
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
width:45px;
height:45px;
background:rgba(0,0,0,.6);
border:none;
border-radius:50%;
}
.iconfont{
color:#fff;
font-size:38px;
}
.mine-backtop{
&-enter-active,
&-leave-active{
transition:opacity 0.4s;
}
&-enter,
&-leave-to{
opacity:0;
}
}
</style>
src/pages/home/index.vue
<template>
<div class="home">
<scrollbar :data="recommends" @pull-down="pullrefresh" @pull-up="loadmore" @scroll-end="scrollend" ref="scroll">
<slider ref="myswiper" />
<home-nav />
<!-- 热门推荐加载完成后更新滚动条 -->
<recommend @loaded="updatescroll" ref="recommend" />
</scrollbar>
<div class="g-backtop-container">
<me-backtop :visible="backtopvisible" @backtop="backtop" />
</div>
<!-- 该页面自己的子路由 -->
<router-view></router-view>
</div>
</template>
<script>
import slider from 'components/slider';
import scrollbar from 'components/scroll';
import homenav from './nav';
import recommend from './recommend';
import mebacktop from 'components/backtop';
export default {
name:"home",
components:{
slider,
scrollbar,
homenav,
recommend,
mebacktop
},
data(){
return{
recommends:[],
backtopvisible:false
}
},
methods:{
updatescroll(recommends){
this.recommends=recommends;
},
pullrefresh(end){//刷新轮播图
this.$refs.myswiper.getsliders().then(end);
},
loadmore(end){//加载更多
this.$refs.recommend.getrecommends().then(end).catch(err=>{
if(err){//没有更多图片了
console.log(err);
}
end();
});
},
scrollend(translate,swiper){//下拉刷新结束
//显示回到顶部按钮
this.backtopvisible=translate<0 && -translate>swiper.height;//向下拉并且距离大于一屏
},
backtop(){
this.$refs.scroll && this.$refs.scroll.scrolltop();//回到顶部
}
}
}
</script>
<style lang="scss" scoped>
.home{
width:100%;
height:100%;
}
.g-backtop-container{
position: absolute;
z-index:1100;
right:10px;
bottom:60px;
}
</style>