Vue.js上下滚动加载组件的实例代码


Posted in Javascript onJuly 17, 2017

由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的。就短短的150行代码。

Vue.js上下滚动加载组件的实例代码

组件代码

// 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 :style="'min-height:' + realMinHeight + 'px; overflow-x:hidden'">
      <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>

源码:https://github.com/doterlin/vue-wxChat

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中操作Css样式的方法
Feb 12 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 #Javascript
详解利用jsx写vue组件的方法示例
Jul 17 #Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
微信小程序实现留言板
2018/10/31 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python实现画图软件功能方法详解
2020/07/28 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
初入社会应届生求职信
2013/11/18 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
担保书范文
2015/01/20 职场文书
个人廉洁自律总结
2015/03/06 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server