vue无线滚动组件封装
<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无线滚动组件封装的更多相关文章
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
- iOS开发之多图片无缝滚动组件封装与使用
经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...
- vue文本滚动组件
看了好多网上的文本组件,发现好多都有这样那样的问题:特别是滚动的时候失真的感觉,今天整合了文本滚动的方式用CSS的 animation写出一套组件:VUE项目直接用.感觉有用的朋友关注下 效果图, ...
- vue.js table组件封装
table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...
- vue element-ui 分页组件封装
<template> <el-pagination @size-change="handleSizeChange" @current-change="h ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- Vue + Element UI 实现权限管理系统 (功能组件封装)
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- 基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
随机推荐
- 如何让你的JS代码写的更漂亮
感觉这篇文章总结的js的规范写法不错,拿来收藏.转自:https://mp.weixin.qq.com/s/AtR94IL9BW9EXOTnKOilmA 1. 按强类型风格写代码 JS是弱类型的,但是 ...
- 破解Excel 工作表/薄密码
新建excel 在右上角的ThisWorkbook右键插入模块复制下列CODE. Option Explicit Public Sub AllInternalPasswords()' Breaks w ...
- web开发中会话跟踪的方法
1. 什么是会话 会话是指一个终端用户(服务器)与交互系统(客户端)进行通讯的过程. 2. 什么是会话跟踪 对同一个用户对服务器的连续的请求和接受响应的监视.(将用户与同一用户发出的不同请求之间关联, ...
- Leon-ai on WSL
这几天尝试了下Windows10的WSL,的确是良心产品,虽然还有很多待改进的地方(比如iptabeles之类的功能还未支持). 使用了WSL就避免安装双系统的繁琐,节省很多时间,而且因为是微软自家产 ...
- maven 配置参数详解!
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- svn访问版本库时一直提示: please wait while the repository browser is initializing
最近不知道做了什么操作,原来正常的SVN Check In/Out都无法正常操作. 正常Check In的动作,几秒钟就会操作完成,但是我却等了好久好久,然后提示Connection timed ou ...
- 【MM系列】SAP MB5B中FI凭证摘要是激活的/结果可能不正确 的错误
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MB5B中FI凭证摘要是激活 ...
- Windows.命令行(CMD)_执行命令&环境变量
1.CMD命令中如果 命令有换行的话,就使用 ^来连接(这就类似于 Linux命令行中 \ 的作用) 2.环境变量 2.1.显示 所有环境变量的值,命令:set 2.2.显示 某个环境变量的值,命令 ...
- Linux 系统多台主机之间做SSH免密码登陆
SSH 免密登录 环境说明 CentOS 7.3 关键点 免密登录的关键点在于理解谁登录谁. A 生成的公钥给 B,也给 C.D,则 A 可以直接免密 SSH 登录 B.C.D A 生成密钥 在 A ...
- 【Linux 环境搭建】ubuntu下nfs安装与配置
(1)安装 #sudo apt-get install nfs-kernel-server portmap(2)修改配置文件 修改/etc/exports,增加以下内容, /root/wksp/roo ...