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

"loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >

                
                    
"item" v-for="item of list">
                    "item.stationPic" class="item_img">
                    
"item_middle font_duo">
                        
"item_Name">{{item.stationName}}
                        
"item_middle_middle">
                            "./img/[email protected]" class="item_icon">
                            "item_Name_span font_duo">{{item.location}}
                        
                        

                            "item_OilsType">95#
                            "item_Moeny">¥6.66
                            "item_YMoeny">优惠0.5元
                        
                    
                    "item_kilmite">1.55km
                
            
复制代码

 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;ifor (let j=0;jfalse;

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

                }, 500);
            },
复制代码