顶部导航栏报错

<template>

<view class="container">

<view id="tab-bar" class="swiper-tab">

<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']"

id="tab.id" :data-current="index" @tap="tapTab">{{tab.name}}</view> </view>
<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item v-for="(tab,index1) in tabBars" :key="index1" class="item-box">
<scroll-view class="list" scroll-y >
<view style="height: 24rpx;"></view>
<view class="bgw">
<view class="item" v-for="(title,index) in dataArr" :key="index">
<view class="title">
{{title.name}}
</view>
<view class="addBtn addActive" v-if="title.id">
已添加
</view>
<view class="addBtn" v-else>
添加
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
isClickChange: false,
tabIndex: 0,
page:1,
dataArr:[
{
name: '关注',
id: false
}, {
name: '体育',
id: false
}, {
name: '热点',
id: false
}, {
name: '娱乐',
id: false
}, {
name: '睡眠',
id: true
}],
tabBars: [{
name: '饮食',
id: 'yinshi'
}, {
name: '运动',
id: 'yundong'
}, {
name: '喝水',
id: 'heshui'
}, {
name: '睡眠',
id: 'shuimian'
}]
}
},
onLoad: function() {
},
methods: {
async changeTab(e) {
let index = e.target.current;
if (this.isClickChange) {
this.tabIndex = index;
this.isClickChange = false;
return;
}
let tabBar = await this.getElSize("tab-bar"),
tabBarScrollLeft = tabBar.scrollLeft;
let width = 0;

        for (let i = 0; i < index; i++) {  
            let result = await this.getElSize(this.tabBars[i].id);  
            width += result.width;  
        }  
        let winWidth = uni.getSystemInfoSync().windowWidth,  
            nowElement = await this.getElSize(this.tabBars[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.tabIndex = index; //一旦访问data就会出问题  
    },  
    getElSize(id) { //得到元素的size  
        return new Promise((res, rej) => {  
            uni.createSelectorQuery().select("#" + id).fields({  
                size: true,  
                scrollOffset: true  
            }, (data) => {  
                res(data);  
            }).exec();  
        })  
    },  
    async tapTab(e) { //点击tab-bar  
        if (this.tabIndex === e.target.dataset.current) {  
            return false;  
        } else {  
            let tabBar = await this.getElSize("tab-bar"),  
                tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft  
            this.scrollLeft = tabBarScrollLeft;  
            this.isClickChange = true;  
            this.tabIndex = e.target.dataset.current  
        }  
    },  

}  

}
</script>

<style scoped>
.list {
width: 100%;
height: 100%;
background-color: #fafafa;
}

.swiper-tab {  
    width: 100%;  
display: flex;  
justify-content: space-around;  
background-color: #FFFFFF;  
    line-height: 100upx;  
    height: 100upx;  
}  

.swiper-tab-list {  
    font-size: 28upx;  
    text-align: center;  
    color:  #333333;  
padding: 0 10rpx;  
}  

.active {  
    color: #08B907;  
border-bottom: 6rpx solid  #08B907;  
}  

.swiper-box {  
  width: 100%;  

height: calc(100vh - 100upx);
box-sizing: border-box;
}
.bgw{
width: 100%;
background-color: #FFFFFF;
margin-bottom: 100rpx;
}
.item{
width: 698rpx;
height: 118rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #EFEFEF;
margin: 0 24rpx;
}
.item:last-child{
border: 0;
}
.item .title{
font-size: 32rpx;
color: #333333;
}
.item .addBtn{
width: 118rpx;
height: 46rpx;
line-height: 46rpx;
text-align: center;
font-size: 24rpx;
color: #FFFFFF;
background: #08B907;
border-radius: 22rpx;
}
.item .addActive{
background: #D8D8D8;
color: #FFFFFF;
}
</style>

请问楼主解决了吗？我的报这个错，let tabBar = await this.getElSize("tab-bar"),运行为null