vant-autoload

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	-