Rodney Vg

Rodney Vg

1592993880

A vue component support big amount data list with high scroll performance

Advantages

  • Only 3 required props, simple and very easy to use.

  • Big data list with high render performance and efficient.

  • You don’t have to care about item size, it will calculate automatic.

Live demo

https://tangbc.github.io/vue-virtual-scroll-list

https://codesandbox.io/s/live-demo-virtual-list-e1ww1

What’s new in v2.0

Here are the major of update informations with release v2.0.

Since the v2.0 is not compatible with v1.x, please note before upgrading, v1.x documentation see v1.x.md.

Simple usage

npm install vue-virtual-scroll-list --save

Root component:

<template>
  <div>
    <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable
      :data-key="'uid'"
      :data-sources="items"
      :data-component="itemComponent"
    />
  </div>
</template>

<script>
  import Item from './Item'
  import VirtualList from 'vue-virtual-scroll-list'

  export default {
    name: 'root',
    data () {
      return {
        itemComponent: Item,
        items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text: 'xyz'}, ...]
      }
    },
    components: { 'virtual-list': VirtualList }
  }
</script>

Item component:

<template>
  <div>{{ index }} - {{ source.text }}</div>
</template>

<script>
  export default {
    name: 'item-component',
    props: {
      index: { // index of current item
        type: Number
      },
      source: { // here is: {uid: 'unique_1', text: 'abc'}
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

More usages or getting start you can refer to these clearly examples.

Props type

Required props

**             Prop             ** Type Description
data-key String Function
data-sources Array[Object] The source array built for list, each array data must be an object and has an unique key get or generate for data-key property.
data-component Component The render item component created / declared by vue, and it will use the data object in data-sources as render prop and named: source.

Optional props

Prop Type Default Description
keeps Number 30 How many items you are expecting the virtual list to keep rendering in the real dom.
extra-props Object {} Extra props assign to item component that are not in data-sources. Notice: index and source are both occupied inner.
estimate-size Number 50 The estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is recommended to assign the average that calculate by yourself.

|                Prop                | Type | Default | Description |
| start | Number | 0 | Setting scroll position stay start index. |
| offset | Number | 0 | Setting scroll position stay offset. |
| scroll | Event | | Emited when scrolling, param (event, range). |
| totop | Event | | Emited when scrolled to top or left, no param. |
| tobottom | Event | | Emited when scrolled to bottom or right, no param. |
| resized | Event | | Emited when item resized (mounted), param (id, size). |
| direction | String | vertical | Scroll direction, available values are vertical and horizontal |
| page-mode | Boolean | false | Let virtual list using global document to scroll through the list. |
| top-threshold | Number | 0 | The threshold to emit totop event, attention to multiple calls. |
| bottom-threshold | Number | 0 | The threshold to emit tobottom event, attention to multiple calls. |
| root-tag | String | div | Root element tag name. |
| wrap-tag | String | div | List wrapper element (role=group) tag name. |
| wrap-class | String | | List wrapper element class name. |
| wrap-style | Object | {} | List wrapper element inline style. |
| item-tag | String | div | Item wrapper element (role=item) tag name. |
| item-class | String | | Item wrapper element class name. |
| item-class-add | Function | | A function that you can return extra class (String) to item wrapper element, param (index). |
| item-style | Object | {} | Item wrapper element inline style. |
| item-scoped-slots | Object | {} | The $scopedSlots for item component. |
| header-tag | String | div | For using header slot, header slot wrapper element (role=header) tag name. |
| header-class | String | | For using header slot, header slot wrapper element class name. |
| header-style | Object | {} | For using header slot, header slot wrapper element inline style. |
| footer-tag | String | div | For using footer slot, footer slot wrapper element (role=footer) tag name. |
| footer-class | String | | For using footer slot, footer slot wrapper element class name. |
| footer-style | Object | {} | For using using footer slot, footer slot wrapper element inline style. |

Public methods

You can call these methods via [ref](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements):

Method Description
reset() Reset all state back to initial.
scrollToBottom() Manual set scroll position to bottom.
scrollToIndex(index) Manual set scroll position to a designated index.
scrollToOffset(offset) Manual set scroll position to a designated offset.
getSize(id) Get the designated item size by id (from data-key value).
getSizes() Get the total number of stored (rendered) items.
getOffset() Get current scroll offset.
getClientSize() Get wrapper element client viewport size (width or height).
getScrollSize() Get all scroll size (scrollHeight or scrollWidth).
updatePageModeFront() When using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually.

Attentions

This component use an in-place patch strategy to render list instead of v-for and :key. This way achieves the best efficient, but only suitable when your list output does not rely on item component inner state or temporary DOM state (e.g. form input values).

But how to deal with such a situation? Without maintaining inner state, recommend to use props and dispatch (stateless component), here is an example keep-state.

Contributions

Welcome to improve this component with any issue, pull request or code review.

Changelogs

Maintain and update occasionally, for changes see release.

Download Details:

Author: tangbc

Live Demo: https://tangbc.github.io/vue-virtual-scroll-list

GitHub: https://github.com/tangbc/vue-virtual-scroll-list

#vuejs #vue #javascript #vue-js

What is GEEK

Buddha Community

A vue component support big amount data list with high scroll performance
 iOS App Dev

iOS App Dev

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Big Data Consulting Services | Big Data Development Experts USA

Big Data Consulting Services

Traditional data processing application has limitations of its own in terms of processing the large chunk of complex data and this is where the big data processing application comes into play. Big data processing app can easily process complex and large information with their advanced capabilities.

Want to develop a Big Data Processing Application?

WebClues Infotech with its years of experience and serving 350+ clients since our inception is the agency to trust for the Big Data Processing Application development services. With a team that is skilled in the latest technologies, there can be no one better for fulfilling your development requirements.

Want to know more about our Big Data Processing App development services?

Visit: https://www.webcluesinfotech.com/big-data-solutions/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#big data consulting services #big data development experts usa #big data analytics services #big data services #best big data analytics solution provider #big data services and consulting

Silly mistakes that can cost ‘Big’ in Big Data Analytics

Big Data has played a major role in defining the expansion of businesses of all kinds as it helps the companies to understand their audience and devise their business techniques in accordance with the requirement.

The importance of ‘Data’ has been spoken very highly in the modern-day business. Thus, while using big data analysis, the companies must keep away from these minor mistakes otherwise it could have a major impact on their performances. Big Data analysis can be the silver bullet that can answer your questions and help your business to scale newer heights.

Read More: Silly mistakes that can cost ‘Big’ in Big Data Analytics

#top big data analytics companies #best big data service providers #big data for business #big data technology #big data mistakes #big data analytics

Big Data can be The ‘Big’ boon for The Modern Age Businesses

The rapid growth of technology has led to many people opting for online services, and thus the collection and maintenance of data becomes a significant factor for any company. Big data analytics service providers can help the companies get a massive edge over their competitors as they would manage the data well and allow the businesses to make better business decisions. It will provide you with a combination of increased customer experience, revenue, and reduced cost and thus will create a win-win situation for your business. Big data technologies will be your perfect ally in excelling in the cut-throat business environment and come out with flying colors.

Read More: Big Data can be The ‘Big’ boon for The Modern Age Businesses

#big data analytics service providers #top big data analytics companies #impact of big data on businesses #best big data consulting firms #big data #big data for businesses

Top Microsoft big data solutions Companies | Best Microsoft big data Developers

An extensively researched list of top Microsoft big data analytics and solution with ratings & reviews to help find the best Microsoft big data solutions development companies around the world.
An exclusive list of Microsoft Big Data consulting and solution providers, after examining various factors of expert big data analytics firms and found the equivalent matches that boast the ace qualities with proven fineness in data analytics. For business growth and enterprise acceleration getting inputs from the whole data of the organization have become necessary, thus we bring to you the most trustworthy Microsoft Big Data consultants and solutions providers for your assistance.
Let’s take a look at the List of Best Microsoft big data solutions Companies.

#microsoft big data solutions development companies #microsoft big data analytics and solution #microsoft big data consultants #microsoft big data developers #microsoft big data #microsoft big data solution providers