选项卡中顶部的栏目列表我想通过接口拿取，该怎么办

<template>
<view class="index">
<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
<block v-for="(tab,index) in tabs" :key="tab.id">
<view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav">{{tab.name}}</view>
</block>
</scroll-view>
<swiper :current="currentTab" class="swiper-box" duration="300" @change="bindChange">
<block v-for="(tab,index1) in newsitems" :key="index1">
<swiper-item>
<scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index1)">
<block v-for="(newsitem,index2) in tab" :key="index2">
<view class="tab-list">{{newsitem.name}}-{{newsitem.label}}</view>
</block>
</scroll-view>
</swiper-item>
</block>

    </swiper>  
</view>  

</template>

<script>
export default {
data() {
return {
title: 'tabbar',
scrollLeft: 0,
isClickChange: false,
currentTab: 0,
tabs: [{
'name':'本地',
'id':'bendi'
},{
'name':'周围',
'id':'zhouwei'
}],
newsitems: []
}
},
beforeCreate:function(){
uni.request({
url: 'http://192.168.1.199/api/News/indexspan', //
method:'POST',
async:false,
success: function (res) {
console.log(res.data.info);
}
});
},
onLoad: function () {

            this.newsitems = this.randomfn()  
        },  
        onUnload:function(){  
            this.scrollLeft = 0,  
                this.isClickChange = false,  
                this.currentTab = 0;  
        },  
        methods: {  
            gettabs(){  
                uni.request({  
                    url: 'http://192.168.1.199/api/News/indexspan', //  
                    method:'POST',  
                    success: function (res) {  
                        return res.data.info;  
                    }  
                });  
                return [{'name':'本地','id':'bendi'}];  
            },  
            bindChange: async function (e) {  
                let index = e.target.current;  
                if (this.isClickChange) {  
                    this.currentTab = index;  
                    this.isClickChange = false;  
                    return;  
                }  
                let tabBar = await this.getWidth("tab-bar"),  
                    tabBarScrollLeft = tabBar.scrollLeft;  

                let width = 0;  

                for (let i = 0; i < index; i++) {  
                    let result = await this.getWidth(this.tabs[i].id);  
                    width += result.width;  
                }  

                let winWidth = uni.getSystemInfoSync().windowWidth,  
                    nowElement = await this.getWidth(this.tabs[index].id),  
                    nowWidth = nowElement.width;  

                if (width + nowWidth - tabBarScrollLeft > winWidth) {  
                    this.scrollLeft = width + nowWidth - winWidth;  
                }  
                if (width < tabBarScrollLeft) {  
                    this.scrollLeft = width;  
                }  
                this.isClickChange = false;  
                this.currentTab = index; //一旦访问data就会出问题  
            },  
            getWidth: function (id) { //得到元素的宽高  
                return new Promise((res, rej) => {  
                    uni.createSelectorQuery().select("#" + id).fields({  
                        size: true,  
                        scrollOffset: true  
                    }, (data) => {  
                        if (id === 'tab-bar') {  
                            console.log("id=", id, "数据:", data)  
                        }  
                        res(data);  
                    }).exec();  
                })  
            },  
            swichNav: async function (e) { //点击tab-bar  
                if (this.currentTab === e.target.dataset.current) {  
                    return false;  
                } else {  
                    let tabBar = await this.getWidth("tab-bar"),  
                        tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft  
                    this.scrollLeft = tabBarScrollLeft;  
                    this.isClickChange = true;  
                    this.currentTab = e.target.dataset.current  
                }  
            },  
            loadMore: function (e) {  
                let last = this.newsitems[e][this.newsitems[e].length - 1].label,  
                    name = this.newsitems[e][this.newsitems[e].length - 1].name;  
                for (let i = 1; i <= 10; i++) {  
                    this.newsitems[e].push({  
                        name: name,  
                        label: i + last  
                    });  
                }  
            },  
            randomfn() {  
                let ary = [];  
                for (let i = 0, length = this.tabs.length; i < length; i++) {  
                    let aryItem = [];  
                    for (let j = 1; j <= 20; j++) {  
                        aryItem.push({  
                            name: this.tabs[i].name,  
                            label: j  
                        });  
                    }  
                    ary.push(aryItem);  
                }  
                return ary;  
            }  
        }  
    }  

</script>

<style>
page {
display: flex;
}

.index {  
    display: flex;  
    flex: 1;  
    flex-direction: column;  
    overflow: hidden;  
    height: 100%;  
}  

.index-bd {  
    width: 750px;  
    height: 100%;  
}  

.swiper-tab {  
    width: 100%;  
    white-space: nowrap;  
    line-height: 64px;  
    height: 64px;  
}  

.swiper-tab-list {  
    font-size: 30px;  
    width: 150px;  
    display: inline-block;  
    text-align: center;  
    color: #777777;  
}  

.on {  
    color: #FF0000;  
    border-bottom: 5px solid #FF0000;  
}  

.swiper-box {  
    flex: 1;  
    width: 100%;  
    height: 100%;  
}  

.swiper-box view {  
    text-align: center;  
}  

.tab-list {  
    width: 100%;  
    height: 90px;  
    line-height: 90px;  
    text-align: left;  
    border-bottom: 2px solid #EFEFF4;  
}  

</style>