1.0.0 • Published 5 years ago
vue_animation_component v1.0.0
vue_animation_component
vue列表动画效果组件
使用
安装
npm i vue_animation_component -S
全局应用组件
``` javascript
import List_component from 'vue_animation_component'
Vue.use(List_component)
使用组件
<template>
<div style="width: 300px;height: 500px;">
<List_component :singerData="singerData"
:TableLen="6"></List_component>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
singerData: [{"id": 1, "image": "http://img15.3lian.com/2015/f2/8/d/96.jpg", "name": "测试1"},
{"id": 2, "image": "http://img15.3lian.com/2015/f2/8/d/97.jpg", "name": "测试2"},
{"id": 3, "image": "http://img15.3lian.com/2015/f2/8/d/98.jpg", "name": "测试3"},
],
id: 0
}
}
}
</script>
组件属性
TableLen: 容器内列表展示的条目数可配置
singerData: 数据源相关
* id: 列表每个item标签
* image: 图片
* name:列表item名称
说明
组件可根据外部容器的大小来动态改变展示的列表大小,适用于多种场景,移动端,PC端
只需要设置外部容器的大小即可
效果
1.0.0
5 years ago