本篇内容主要讲解“如何使用Vue代码实现一个上下滚动加载组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用Vue代码实现一个上下滚动加载组件”吧!
组件代码
计算
安全
数据库
网络和加速
企业服务
// scrollLoader.vue
// 滚动加载组件
<style scoped>
.container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;}
.loading{ width: 100%; height: 40px; position: relative; overflow: hidden; text-align: center; margin: 5px 0 ; color: #999; font-size: 13px;}
.loading-icon{color: #707070;};
.loader {
font-size: 10px;
margin: 8px auto;
text-indent: -9999em;
width: 24px;
height: 24px;
border-radius: 50%;
background: #999;
background: -moz-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1s infinite linear;
animation: load3 1s infinite linear;
}
.loader:before {
width: 50%;
height: 50%;
background: #999;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #f5f5f5;
width: 72%;
height: 75%;
border-radius: 68%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<template>
<div id="scrollLoader-container" class="container-main">
<div class="loading" v-if="topLoading">
<div class="loader">加载中...</div>
</div>
<div :>
<slot></slot>
</div>
<div class="loading" v-if="bottonLoading">
<div class="loader">加载中...</div>
</div>
</div>
</template>
<script>
export default {
name: "scroll-loader",
props: {
//给slot传一个最小值，保证一开始能出现滚动条
'minHeight': {
type: Number,
default: 800
},
},
created(){
},
computed: {
realMinHeight(){
return this.minHeight + 30
}
},
data() {
return {
topLoading: false,
bottonLoading: false,
stopTopLoading: false, //是否停止传播滚动到顶部事件
stopBottonLoading: false, //是否停止传播滚动到底部事件
}
},
mounted(){
this.listenScroll();
},
methods: {
listenScroll(){
var me = this;
var topDone = (stopTopLoading) => {
me.topLoading = false;
if(stopTopLoading) me.stopTopLoading = true;
};
var bottonDone = (stopBottonLoading) => {
me.bottonLoading = false;
if(stopBottonLoading) me.stopBottonLoading = true;
};
setTimeout(function(){
var scrollContainer = document.getElementById('scrollLoader-container');
scrollContainer.onscroll = function(){
if(scrollContainer.scrollTop<=0 && !me.stopTopLoading){
if(me.topLoading) return;
me.topLoading = true;
me.$emit('scroll-to-top', topDone);
}
if((scrollContainer.offsetHeight + scrollContainer.scrollTop+1 >= scrollContainer.scrollHeight) && !me.stopBottonLoading){
if(me.bottonLoading) return;
me.bottonLoading = true;
scrollContainer.scrollTop += 40;
me.$emit('scroll-to-botton', bottonDone);
}
}
}, 50)
},
}
}
</script>Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
到此，相信大家对“如何使用Vue代码实现一个上下滚动加载组件”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
