<template>
<div class="scroll-wapper" :style="{height: scrollHeight + 'px'}" id="scroll-ul">
<ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<slot>
<div class="tip">
<div class="logo">
<img v-if="tip.img" :src="tip.img"/>
<span v-if="tip.icon" class="iconfont" v-html="tip.icon"></span>
</div>
<p>{{tip.title}}</p>
<button v-if="tip.btn" @click="go">{{tip.btn}}</button>
</div>
</slot>
</ul>
</div>
</template>
<script>
import { InfiniteScroll, Indicator } from "mint-ui";
import defaultImg from "../../../assets/images/good-tip.png"; export default {
data() {
return {
length: true
// height: {
// height: this.scrollHeight
// }
};
},
mounted() {
// console.log(this.scrollHeight)
},
methods: {
loadMore() {
this.loadingHandle();
this.$emit("loadMore");
},
loadingHandle() {
Indicator.open({
text: "加载中",
spinnerType: "fading-circle"
});
}, },
props: {
loading: {
type: Boolean,
default() {
return false;
}
},
tip: {
type: Object,
default() {
return {
img: defaultImg,
title: "暂时没有哦!",
btn: ""
};
}
},
scrollHeight: {
type: Number,
default() {
return 200;
}
}
}
};
</script>

外部需传入scrollHeight属性,是该滚动容器的高度,后可以根据实际情况使用

vue无线滚动组件封装的更多相关文章

  1. Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...

  2. iOS开发之多图片无缝滚动组件封装与使用

    经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...

  3. vue文本滚动组件

    看了好多网上的文本组件,发现好多都有这样那样的问题:特别是滚动的时候失真的感觉,今天整合了文本滚动的方式用CSS的 animation写出一套组件:VUE项目直接用.感觉有用的朋友关注下   效果图, ...

  4. vue.js table组件封装

    table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...

  5. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  6. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  7. Vue + Element UI 实现权限管理系统 (功能组件封装)

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

  8. Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

  9. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

随机推荐

  1. md5sum c实现

    #include <stdio.h>#include <ctype.h> #define STR_VALUE(val) #val#define STR(name) STR_VA ...

  2. 关于spotlight_on_oracle的配置及操作

    Spotlight是一个强有力的Oracle数据库实时性能诊断工具,提供了一个直观的.可视化的数据库活动展现.Spotlight可视化展现性能瓶颈,一旦某个指标超出可接受的阀值的话.而且,通过下钻功能 ...

  3. docker部署Javaweb项目(jdk+tomcat+mysql)

    步骤一:在主机下载安装docker,参照Centos7上安装docker 步骤二:下载Linux版本的JDK1.6和Tomcat6.0(其他项目若依赖其他版本的运行环境可选择另外版本下载),通过sec ...

  4. 怎么用jira写bug

    工具/原料 有网的电脑 方法/步骤1: 打开公司给的访问JIRA的链接,输入公司给你注册的账号和密码,点击登录 方法/步骤2: 点击JIRA主菜单上的“创建”,进入编辑bug界面 方法/步骤3: 项目 ...

  5. MAC截图工具

    截图快捷键 ctrl+shift+A

  6. 六:flask-自定义URL转换器

    flask进行url参数匹配的时候,是继承的werkzeug.routing.BaseConverter库进行重写的 导入看源码 里面有所有的URL参数数据类型的判断 也就是说,可以继承过后实现自己的 ...

  7. Delphi下利用WinIo模拟鼠标键盘详解 有参考价值

    https://blog.csdn.net/fgrass_163/article/details/6365296 Delphi下利用WinIo模拟鼠标键盘详解 2011年04月26日 21:03:00 ...

  8. 【Spring】---属性注入

    一.Spring注入属性(有参构造和[set方法]) 注意:在Spring框架中只支持set方法.有参构造方法这两种方法. 使用有参数构造方法注入属性(用的不多,但需要知道): 实体类 package ...

  9. 数据结构系列之2-3-4树的插入、查找、删除和遍历完整版源代码实现与分析(dart语言实现)

    本文属于原创,转载请注明来源. 在上一篇博文中,详细介绍了2-3树的操作(具体地址:https://www.cnblogs.com/outerspace/p/10861488.html),那么对于更多 ...

  10. 在线cron表达式生成工具

    http://cron.qqe2.com/ 名称 是否必须 允许值 特殊字符 秒 是 0-59 , - * / 分 是 0-59 , - * / 时 是 0-23 , - * / 日 是 1-31 , ...