vant-autoload

中文

general autoload biz components based on @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

import Autoload from 'vant-autoload';

Vue.component(Autoload.name, Autoload);

Usage

Basic Usage

<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" />

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

<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>

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 | - |