纯前端的分页(利用vant的List组件)

<van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >

                <!--<div class="item" v-for="item of list" @click="handlerDetail">-->
                    <div class="item" v-for="item of list">
                    <img :src="item.stationPic" class="item_img">
                    <div class="item_middle font_duo">
                        <p class="item_Name">{{item.stationName}}</p>
                        <div  class="item_middle_middle">
                            <img src="./img/icon_position@2x.png" class="item_icon">
                            <span class="item_Name_span font_duo">{{item.location}}</span>
                        </div>
                        <div>
                            <span class="item_OilsType"><span>95</span>#</span>
                            <span class="item_Moeny">¥<span>6.66</span></span>
                            <span class="item_YMoeny">优惠<span>0.5</span>元</span>
                        </div>
                    </div>
                    <span class="item_kilmite">1.55km</span>
                </div>
            </van-list>

 onLoad() {
                let OilsData={
                    latitude:this.latitude,
                    longitude:this.longitude
                }
                // 异步更新数据
                setTimeout(() => {
                        this.$commonApi.getOilsList(OilsData).then(res=>{
                            // 获取到的res数据是组合查询的所有结果
                            let Data=res.data
                            let DataItem=[Data.slice(5*this.index,5*(this.index+1))]
                            for (let i=0;i<DataItem.length;i++){
                                for (let j=0;j<DataItem[i].length;j++){
                                    this.list.push(DataItem[i][j])
                                }
                            }
                                this.index++  // 页数递增

                            // 加载状态结束
                            this.loading = false;

                            // 数据全部加载完成
                            if (this.list.length ===Data.length) {
                                this.finished = true;
                            }
                        })

                }, 500);
            },