zoukankan      html  css  js  c++  java
  • Vue下拉刷新组件

    https://github.com/bedlate/vue-data-loading

     

    Examples

    examples

    Installation

     npm install vue-pull-to --save
    

    Use Setup

    <template>
      <div>
        <pull-to :top-load-method="refresh">
          <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
          </ul>
        </pull-to>
      </div> 
    </template>
    
    <script>
      import PullTo from 'vue-pull-to'
      
      export default {
        name: 'example',
        components: {
          PullTo
        },
        methods: {
          refresh(loaded) {
            setTimeout(() => {
              this.dataList.reverse();
              loaded('done');
            }, 2000);
          }
        }
      }
    </script>

    组件会默认占据父元素的百分之百高度。props top-load-methodbottom-load-method会默认传进一个loaded参数,该参数是一个改变组件加载状态的函数,必须调用一次loaded不然组件就会一直处于加载状态,如果执行loaded('done')组件内部状态就会变成成功加载的状态,loaded('fail')为失败。

    更多使用示例请参考Examples的代码

    API Docs

    props

    属性说明类型默认值
    distance-index 滑动的阀值(值越大滑动的速度越慢) Number 2
    top-block-height 顶部在滚动容器外的块级元素区域高度 Number 50
    bottom-block-height 底部在滚动容器外的块级元素区域高度 Number 50
    top-load-method 顶部下拉时执行的方法 Function  
    bottom-load-method 底部上拉时执行的方法 Function  
    is-throttle 是否截流top-pullbottom-pull自定义事件的触发以保证性能 Boolean true
    top-config 滚动容器顶部信息的一些配置 Object 默认配置
    bottom-config 滚动容器底部信息的一些配置 Object 默认配置

    topConfigbottomConfig可配置的选项和默认配置项的值

    const TOP_DEFAULT_CONFIG = {
      pullText: '下拉刷新', // 下拉时显示的文字
      triggerText: '释放更新', // 下拉到触发距离时显示的文字
      loadingText: '加载中...', // 加载中的文字
      doneText: '加载完成', // 加载完成的文字
      failText: '加载失败', // 加载失败的文字
      loadedStayTime: 400, // 加载完后停留的时间ms
      stayDistance: 50, // 触发刷新后停留的距离
      triggerDistance: 70 // 下拉刷新触发的距离
    }
    
    const BOTTOM_DEFAULT_CONFIG = {
      pullText: '上拉加载',
      triggerText: '释放更新',
      loadingText: '加载中...',
      doneText: '加载完成',
      failText: '加载失败',
      loadedStayTime: 400,
      stayDistance: 50,
      triggerDistance: 70
    }

    slots

    名称说明scope
    default 默认slot滚动容器的内容  
    top-block 滚动容器外顶部的内容(支持作用域slot需用template标签加上scope属性) state:当前的状态、state-text:状态对应的文本
    bottom-block 滚动容器外底部的内容(支持作用域slot需用template标签加上scope属性) state:当前的状态、state-text:状态对应的文本

    events

    事件名说明
    top-state-change 顶部状态发生了改变时触发,第一个参数为当前的状态
    bottom-state-change 底部状态发生了改变时触发,第一个参数为当前的状态
    top-pull 下拉时触发,第一个参数为当前拉动的距离值,默认会被截流,可配置props isThrottle来实时触发
    bottom-pull 上拉时触发,第一个参数为当前拉动的距离值,默认会被截流,可配置props isThrottle来实时触发
    infinite-scroll 当滚动容器滚动到底部时触发
  • 相关阅读:
    CSS3—— 2D转换 3D转换 过渡 动画
    CSS3——边框 圆角 背景 渐变 文本效果
    CSS3——表单 计数器 网页布局 应用实例
    CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器
    CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
    CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
    CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
    Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final
    数据库——单表查询
    数据库——添加,修改,删除
  • 原文地址:https://www.cnblogs.com/sybboy/p/9003350.html
Copyright © 2011-2022 走看看