# vant-autoload

> general autoload biz components based on vant

Latest version **1.1.0** (published 2018-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vant-autoload
pnpm add vant-autoload
yarn add vant-autoload
bun add vant-autoload
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-08-22 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | trivia |
| Maintainers | trivia |
| Keywords | autoload, list, vant, mobile |

## Links

- npm: https://www.npmjs.com/package/vant-autoload
- Repository: https://github.com/vancysavoki/vant-autoload
- Homepage: https://github.com/vancysavoki/vant-autoload#readme
- Issues: https://github.com/vancysavoki/vant-autoload/issues
- npm.io page: https://npm.io/package/vant-autoload

## Recent versions

- 1.1.0 (latest) — 2018-08-22
- 1.0.0 — 2018-08-13

## README

## vant-autoload
[中文](README-ZH-CN.md)

general autoload biz components based on [@youzan/vant](https://github.com/youzan/vant)
#### Update
##### 1.1.0
1. add content slot as main view
2. use vueg as skeleton render when loading
##### 1.0.0
1. vant-autoload release
### Install
``` javascript
import Autoload from 'vant-autoload';

Vue.component(Autoload.name, Autoload);
```



### Usage

#### Basic Usage

```html
<autoload 
    :to="true"
    :clickable="true"
    :view="objView"
    :finished="finished"
    :loading="loading"
    :limit="10"
    :value="value"
    :canSwipe="true"
    :swipeRightView="swipeRightView"
    v-on:load="load"
    v-on:swipe-click="load" />
```

```js
class ViewModel {
    constructor(obj) {
        this.to = ''; // generate where you want jump
    }
}
const objView = {
    props: {
      value: ViewModel
    },
    render: h => h('span', 'Single Card Content' + this.value)
};
const swipeRightView = {
    props: {
      value: ViewModel,
      index: {
        type: Number
      }
    },
    render: h => h('span', 'Delete' + this.value)
};
export default {
  data() {
    return {
      value: [],
      objView: objView,
      swipeRightView: swipeRightView,
      loading: false,
      finished: false
    };
  },
  methods: {
    load() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.value.push(new ViewModel(this.value.length + 1));
        }
        this.loading = false;

        if (this.value.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
};

```

#### Further Usage

```html
<autoload 
    :to="true"
    :clickable="true"
    :view="objView"
    :finished="finished"
    :loading="loading"
    :limit="10"
    :value="value"
    :canSwipe="true"
    v-on:load="load">
    <right-view 
        slot="right" 
        slot-scope="content" 
        v-bind="content" v-on:swipe-click="load">
</autoload>
```

```js
const objView = {
    props: {
      value: Object
    },
    render: h => h('span', 'Single Card Content' + this.value)
};
const rightView = {
    props: {
      value: Object,
      index: {
        type: Number
      }
    },
    render: h => h('button', {
        on: {
            click() {
                this.$emit('swipe-click');
            }
        }
    }, 'Delete' + this.value)
};
export default {
  components: {
    rightView: rightView,
  },
  data() {
    return {
      value: [],
      objView: objView,
      loading: false,
      finished: false
    };
  },
  methods: {
    load() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.value.push(new ViewModel(this.value.length + 1));
        }
        this.loading = false;

        if (this.value.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
};

```
### API

| Attribute | Description | Type | Default | Required |
|-----------|-----------|-----------|-------------|------|
| to | Whether the `van-cell` $router.push() when clicking  | `Boolean` | `false` | `true` |
| clickable | Whether the `van-cell` reacts when clicking | `Boolean` | `false` | `false` |
| view | The main cell view, will be wrapped by `van-cell` | `VueComponent` |  | `true` |
| canSwipe | Whether support swipe right view | `Boolean` | `false` | `false` |
| value | The objects to be rendered | `Array` | `[]` | `true` |
| swipeRightView | If `canSwipe`, will render the swipe right view base on van-cell-swipe | `VueComponent` |  |  `true` |
| finished | Whether avoid emit loadEvent | `Boolean` | `true` | `false` |
| loading | Current loading state, if `true`, show loading components | `Boolean` | `false` | `false` |
| limit | Reserved attr | `Number` | `5` | `false` |
### slot

| Attribute | Description | Type | Default | Required |
|-----------|-----------|-----------|-------------|------|
| content[Experimental] | * now you can use content slot as `view` more like vue style, rather than react style * | `VueComponent` |  | `false` |
| right | When swiping, the swiped item and index will be as the prop pass to the components | `VueComponent` |  | `false` |
### Origin Event

| Event | Description | Arguments |
|-----------|-----------|-----------|
| load | Triggered when the distance between the scrollbar and the bottom is less than offset | - |

### Transmit RightView Event

| Event | Description | Arguments |
|-----------|-----------|-----------|
| any | The event `$emit` by rightView will also export on this components, so just use `v-on` you can get the rightView events. For simplely, the listeners is not filtered currently | - |

---
_Source: https://npm.io/package/vant-autoload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._