https://github.com/shaoxiong789/vvlv

Virtual-list component build with vue and rxjs
https://github.com/shaoxiong789/vvlv

Last synced: about 2 months ago
JSON representation

Virtual-list component build with vue and rxjs

• Host: GitHub
• URL: https://github.com/shaoxiong789/vvlv
• Owner: shaoxiong789
• License: mit
• Created: 2019-07-03T14:44:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T21:21:15.000Z (about 2 years ago)
• Last Synced: 2024-04-27T22:01:09.135Z (8 months ago)
• Language: TypeScript
• Homepage: https://shaoxiong789.github.io/vvlv/example/dist/
• Size: 1.61 MB
• Stars: 42
• Watchers: 1
• Forks: 0
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vvlv

> vvlv component build with vue and rxjs

## Selling Point

virtualList won't create or remove any DOM when you scroll the list, it will reuse the existing DOM and only change their position and data. But when you resize your window, you'll find the DOM's number is changed, so your virtual list will always have just right number of DOM.

## Install

```bash

npm install --save vvlv

```

## Usage

```javascript

import {Component,Vue} from 'vue-property-decorator';

import virtualList from 'vvlv'

@Component({

  components: {

    virtualList

  }

})

export default class App extends Vue {

  data:Array = [];

  mounted() {

    fetch('https://jsonplaceholder.typicode.com/photos')

      .then(res => res.json())

      .then(data => this.data = data)

      .catch(console.error);

  }

  render() {

    return (

      


         {

                  return (

                    


                      

                        


                          

                        

                        


                          
{item.title}

                          
No.{item.id}

                        

                      

                    

                  )

                }

              }

            }}

          >

        

      

    )

  }

}

```


## Props

| Property   | Type                              | Description                     |

| ---------- | --------------------------------- | ------------------------------- |

| `list`    | `Array`                       | Data source of the list.        |

| `options` | `IVirtualListOptions`              | Options of the virtual list.    |

| `style`    | `any`                             | Style of VirtualList container. |

### `IVirtualListOptions`

| Property     | Type      | Default      | Description                                                                                                     |

| ------------ | --------- | ------------ | --------------------------------------------------------------------------------------------------------------- |

| `height`     | `number`  | **NOT NULL** | Item height, it's **necessary**, use this property to calculate how many rows should be rendered actually. |

| `spare`      | `number`  | 3            | Spare rows out of the view.                                                                                     |

| `resize`     | `boolean` | true         | To mark if the real dom number should be recomputed when the window resize.                                     |

## License

MIT © [shaoxiong789](https://github.com/shaoxiong789)