vue webapp之music（十二） listview基础组件的开发和应用-滚动列表实现

翟敏1201

于 2018-09-11 23:24:46 发布

阅读量1.2k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/chaitong2204/article/details/82633845

版权

本文介绍了在Vue webapp中开发ListView基础组件的步骤，包括将其置于base目录下，创建listview.vue，传递数据，遍历显示，组件注册及使用，以及实现图片的懒加载功能。详细过程参考了作者之前关于图片懒加载的文章。

摘要由CSDN通过智能技术生成

1.该页面是通用页面，所以将它放置在base目录下

新建listview.vue

2.将数据传递给listview

3.遍历对应的数据

<scroll class="listview" :data="data">
    <ul>
      <li v-for="group in data" class="list-group">
        <h2 class="list-group-title">{
  {group.title}}</h2>
        <ul>
          <li v-for="item in group.items" class="list-group-item">
            <img class="avatar" :src="item.avatar" alt="">
            <span class="name">{
  {item.name}}</span>
          </li>
        </ul&