list-animation-componentss

vue列表动画滚动

Usage no npm install needed!

<script type="module">
  import listAnimationComponentss from 'https://cdn.skypack.dev/list-animation-componentss';
</script>

README

list-animation-components

vue列表动画滚动组件

使用

安装

npm i list-animation-components -S

全局应用组件
``` javascript
import List_comment from 'list-animation-components'
Vue.use(List_comment)

使用组件

 <template>
    <div style="width: 300px;height: 500px;">
        <list_comment :singerData="singerData"
                    :TableLen="6"></list_comment>
   </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端
只需要设置外部容器的大小即可

效果

image