如何使用Vue代码实现一个上下滚动加载组件

本篇内容主要讲解“如何使用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是什么

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此，相信大家对“如何使用Vue代码实现一个上下滚动加载组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！