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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python爬取三国演义的实现方法
2016/09/12 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
学习全国两会精神心得体会范文
2014/03/17 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
企业务虚会发言材料
2014/10/20 职场文书
2014年后勤工作总结
2014/11/18 职场文书
工程移交协议书
2016/03/24 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android