iscroll vue_基于Iscroll的vue2组件

最新推荐文章于 2024-08-20 08:52:10 发布

cuk5239

最新推荐文章于 2024-08-20 08:52:10 发布

阅读量374

点赞数

文章标签： vue java python js javascript ViewUI

原文链接：https://vuejsexamples.com/a-vue2-component-based-on-iscroll/

版权

iscroll vue是一个vue2组件，利用Iscroll实现高性能的滚动效果，特别适用于大数据列表，支持无限加载和下拉刷新。组件允许设置固定或可变高度，并能通过重用DOM元素提升性能。使用时需在组件创建前初始化items数组，并将其置于有定位属性的父组件内。

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

iscroll vue

虚拟无限滚动 (vue-virtual-infinite-scroll)

a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh.

一个基于Iscroll的vue2组件，支持具有高性能滚动，无限加载和拉动刷新的大数据列表。

Based on Iscroll, support iscroll configure options
基于Iscroll，支持iscroll配置选项
Reuse the DOM element to get high performance in big data list
重用DOM元素以在大数据列表中获得高性能
Support fixed height and variable height.
支持固定高度和可变高度。
Support bottom loadmore and pulldown refresh event
支持底部loadmore和下拉刷新事件

View demo 查看演示 Download Source 下载源

uncheck the virtual scroll means a normal big data list not use our component. It is used for performance comparison.

取消选中虚拟滚动条意味着正常的大数据列表不使用我们的组件。用于性能比较。

如何使用 (How to use)

npm install vue-virtual-infinite-scroll --save

import virtualScroll from 'vue-virtual-infinite-scroll'
import 'vue-virtual-infinite-scroll/dist/css/vue-virtual-infinite-scroll.css'

Vue.component('virtual-list', virtualScroll)

<template>
    <div class="demo">
      <virtual-list ref="scroller" :items="items" uniqueKey="id" :iscrollOptions="options" :variable="variable" :infinite="true" :pulldown="true" @loadMore="getMoreData" @pullRefresh="refreshData">
        <template slot="content" slot-scope="props">
          <div class="demo-item">
            <span>
              {{props.item.text}}
            </span>
            <img src="./assets/demo.jpeg" />
          </div>
        </template>
      </virtual-list>
    </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      items: [],
      options: {
        scrollbars: true,
        interactiveScrollbars: true,
        probeType: 3,
        mouseWheel: true,
        mouseWheelSpeed: 1
      },
      variable: false
    }
  },
  created () {
    let list = []
    for (let i = 0; i < 100; i++) {
      list.push({
        text: i,
        id: i,
        height: Math.max(Math.floor(Math.random() * 50), 20)
      })
    }
    this.items = list
  },
  methods: {
    getMoreData ($stateChange) {
      if (this.items.length > 1000) {
        $stateChange('complete')
      } else {
        setTimeout(() => {
          let length = this.items.length
          for (let i = length; i < length + 20; i++) {
            this.items.push({
              text: i,
              id: i,
              height: Math.max(Math.floor(Math.random() * 50), 20)
            })
          }
          $stateChange('loaded')
        }, 1500)
      }
    },
    refreshData ($pullStateChange) {
      setTimeout(() => {
        this.items.splice(0)
        for (let i = 0; i < 50; i++) {
          this.items.push({
            text: i,
            id: i,
            height: Math.max(Math.floor(Math.random() * 50), 20)
          })
        }
        $pullStateChange('complete')
      }, 1500)
    },
  }
</script>
<style lang="postcss">
  .demo {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 10px;
    right: 10px;
  }
</style>

注意 (Notice)

You should init the items array during your own component created function before the vue-virtual-infinite-scroll component created.
在创建vue-virtual-infinite-scroll组件之前，应在自己的组件创建函数期间初始化items数组。
You should put the vue-virtual-infinite-scroll component during a parent component, and set a css position property(relative, absolute or fixed) to the parent component.
您应该将vue-virtual-infinite-scroll组件置于父组件中，并为父组件设置css position属性(相对，绝对或固定)。

道具配置 (Prop Configures)

Prop	Type	Required	Default	Description
items	Array	✓	[]	The list expected to render, each item in the list should contain id arrtibute for the unique identify, and in variable height mode, it should also contain height attribute with a string or number value. eg: [{ id: 1, height: 40 }, { id:2, height: 50 }]
uniqueKey	String	✓	'id'	The unique key for each list item
iscrollOptions	Object	*	{}	The iscroll configure options. http://iscrolljs.com/#configuring
variable	Boolean	*	false	Define the height mode of list item. If false, the component will get the item height automatically. If true, you should set the 'height' property to each item in the prop 'items'
bufferSize	Number	*	5	Define the top and bottom buffer item size. It is used to cache the scoll item out of the visable component area, the larger the bufferSize, the higher the scroll performance will achieved.
infinite	Boolean	*	false	True means you want to use the loadMore function when the component scolled to the bottom
distance	Number	*	50	The loadMore infinite function will be called when scrolled into the distance value from bottom
loadMore	Function	*		The custom function called when prop infinite is true and component scrolled into the distance value from bottom. It has a callback param which can controll the loader state(see the How to use)
pulldown	Boolean	*	false	True means you want to use the pullRefresh function when the component pulled out of the top boundary
pullRefresh	Function	*		The custom function called when prop pulldown is true and the component pulled out the top boundary and released. It has a callback param which can controll the puller state(see the How to use)
pulldownText	Object	*	{ begin: '下拉刷新',trigger: '释放更新',refresh: '更新中...',complete: '更新完成',error:'更新失败'}	The custom text object used to show in pull refresh

Struts	类型	需要	默认	描述
项目	数组	✓	[]	预期要呈现的列表，列表中的每个项目都应包含ID arrtibute用于唯一标识，并且在可变高度模式下，它还应包含带有字符串或数字值的height属性。例如：[{id：1，高度：40}，{id：2，高度：50}]
uniqueKey	串	✓	'ID'	每个列表项的唯一键
iscrollOptions	目的	*	{}	iscroll配置选项。 http://iscrolljs.com/#configuring
变量	布尔型	*	假	定义列表项的高度模式。如果为false，则组件将自动获得项目高度。如果为true，则应为prop'items'中的每个项目设置'height'属性
缓冲区大小	数	*	5	定义顶部和底部缓冲区的大小。它用于将scoll项缓存到可见组件区域之外，bufferSize越大，将实现更高的滚动性能。
无限的	布尔型	*	假	True表示您希望在组件倾斜到底部时使用loadMore函数
距离	数	*	50	从底部滚动到距离值时，将调用loadMore无限函数
装载更多	功能	*		当prop infinite为true且组件从底部滚动到距离值时调用的自定义函数。它有一个回调参数，可以控制加载程序的状态(请参阅“如何使用”)
拉下	布尔型	*	假	True表示当组件从顶部边界拉出时要使用pullRefresh函数
pullRefresh	功能	*		当prop pulldown为true且组件拉出顶部边界并释放时调用的自定义函数。它具有一个回调参数，可以控制上拉器的状态(请参阅“如何使用”)
pulldownText	目的	*	{begin：'刷新刷新'，trigger：'释放更新'，refresh：'更新中...'，complete：'更新完成'，error：'更新失败'}	用于在拉动刷新中显示的自定义文本对象