标签：vue 滚动 scroller list value 商品 虚拟 id

vue-virtual-scroller-list虚拟滚动

• 一个虚拟滚动组件，用来处理非常长的或者无限滚动的列表。
• 通过不渲染可视区域以外的内容，显示虚拟的滚动条来
• 将可视区域范围内的条目渲染出来，用户滚动，会处理滚动行为(虚拟的滚动条)，动态重新执行更新渲染。dom复用，不需要消耗太多资源，滚动时，cpu换内存，提升页面性能

安装，打包后项目运行也需要用。

npm install vue-virtual-scroll-list

页面使用

<template>
  <div>
    <virtual-list
      style="height: 300px; overflow-y: auto"
      class="virtual-list"
      :data-key="'id'"
      :data-sources="goodsList"
      :data-component="itemComponent"
      :extra-props="{
        itemClick: itemClick,
        current: current,
      }"
    />
  </div>
  <!-- 
      data-key:循环内容的key,
      data-sources:循环的数据
      data-component:循环的内容,这里由VirtualItem.vue
      extra-prop:其他要传入循环内容的props
   -->
</template>
<script>
import VirtualList from "vue-virtual-scroll-list";
import VirtualItem from "./VirtualItem";
export default {
  name: "",
  components: {
    VirtualList,
  },
  data() {
    return {
      itemComponent: VirtualItem, //虚拟滚动组件循环对象
      current: "",
      goodsList: [//要循环的数据
        { id: "1", value: "商品1" },
        { id: "2", value: "商品2" },
        { id: "3", value: "商品3" },
        { id: "4", value: "商品4" },
        { id: "5", value: "商品5" },
        { id: "6", value: "商品6" },
        { id: "7", value: "商品7" },
        { id: "8", value: "商品8" },
        { id: "9", value: "商品9" },
        { id: "10", value: "商品10" },
        { id: "11", value: "商品11" },
        { id: "12", value: "商品12" },
        { id: "13", value: "商品13" },
        { id: "14", value: "商品14" },
      ], 
    };
  },
  methods: {
    itemClick(inedx) {
        console.log(inedx);
    },
  },
};
</script>

这里将循环对象单独写了一个VirtualItem.vue文件

<template>
  <div
    class="item"
    @mouseover="itemClick(index)"
  >
    {{ this.source.value }} <!--这里简单的输出了行数据里的value-->
  </div>
</template>
<script>
export default {
  props: {
    // 每一行的索引,基础props，不用传递
    index: {
      type: Number
    },
    // 每一行的内容,基础props，不用传递
    source: {
      type: Object,
      default() {
        return {}
      }
    },
    current: String,
    itemClick: Function
  }
}
</script>

学习：
官方文档

标签：vue,滚动,scroller,list,value,商品,虚拟,id
来源： https://www.cnblogs.com/jiajia-hjj/p/15388319.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。