<template>
    <section class="Card_Mb8" >
   
        <ul class="inner" v-infScroll="load" distance="100">
            <li v-for="(item,index) in items">{{index}}</li> 
        </ul>
  </section>

</template>

<script>
    import infScroll from './../../index.js';
    export default {
        name: 'App',
        components: {
        },
        data() {
            return {
                items:[{name:1},{name:2},{name:3},{name:4},{name:5},{name:6},{name:7},{name:8},{name:9},{name:10}]
            }
        },
        directives:{
            infScroll:infScroll,
        },
        created() {


        },
        methods:{
            load(){
                let len = this.items.length;
                for(let i = 0;i < 10; i++){
                    this.items.push({
                        name:(len+i)
                    })
                }
            }
        }
    };
</script>

<style>
.Card_Mb8{


    height: 5rem;
    overflow-y: scroll; 
    position: relative;
-webkit-overflow-scrolling:touch;
font-size: 12px;
}

</style>