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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
javascript操作数组详解
Dec 17 Javascript
详解JavaScript函数
Dec 01 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 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读取IMAP邮件
2006/10/09 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
python实现哈希表
2014/02/07 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python 一句话生成字母表的方法
2019/01/02 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
中学教师培训制度
2014/01/31 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
校园广播稿精选
2014/10/01 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
员工旷工检讨书
2015/08/15 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技