uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

<template>
  <view>
          <scroll-view class="scroll1" scroll-x="true">
            <view :class="currentTab==index ? 'select' : ''" :data-current="index" @click="swichNav" v-for="(item,index) in scoll"
             :key='index'>{{item.txt}}
            </view>
          </scroll-view>
          <swiper :current="currentTab" @change="bindChange" class='swp'  :style="{height:aheight?aheight+'px':'auto'}">
            <swiper-item>
              <view class="list-item">
                <view class="list" v-for="(item,index) in list" :key='index'>
                  <view class="list-img">
                    <image :src="item.imgb" mode=""></image>
                  </view>
                  <view class="list-con">
                    <view>{{item.tit}}</view>
                    <view class="list-foot">
                      <view>
                        <image src="../../static/images/user.png" mode="" class="user"></image>
                        <view class="username">{{item.user}}</view>
                      </view>
                      <view>
                        <image src="../../static/images/love.png" mode="" class="like"></image>
                        <view class="likenum">{{item.like}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item>玻尿酸</swiper-item>
            <swiper-item>水光针</swiper-item>
            <swiper-item>眼部</swiper-item>
            <swiper-item>鼻部</swiper-item>
            <swiper-item>瘦身塑型</swiper-item>
          </swiper>
        </view>
</template>

<script>
export default {
data() {
  return {
      currentTab: 0,
      aheight: '',
      scoll: [{
          txt: '精选'
        }, {
          txt: '玻尿酸'
        }, {
          txt: '水光针'
        }, {
          txt: '眼部'
        }, {
          txt: '鼻部'
        }, {
          txt: '瘦身塑型'
        }],
  }
}
onShow(){
      // 动态获取滑动页面高度
      const query = uni.createSelectorQuery().in(this);
      query.select('.list').boundingClientRect(data => {
          this.aheight = data.height
      }).exec();
    },
methods: {
      // 滑动页面同步tab栏
      bindChange: function(e) {
        this.currentTab = e.detail.current
      },
      //点击tab切换
      swichNav: function(e) {
        var that = this;
        if (this.currentTab === e.target.dataset.current) {
          return false;
        } else {
          this.currentTab = e.target.dataset.current
        }
      }
    }
}
<script>

<style scoped lang="less">
.scroll1 {
      width: 100%;
      white-space: nowrap;
      padding: 25rpx 0;
      & view {
        white-space: normal;
        display: inline-block;
      }
      & view:before {
        content: '|';
        color: #f4f4f4;
        margin: 0 30rpx;
      }
      & view:first-child:before {
        display: none;
      }
      .select {
        color: #fb6583;
      }
    }
    .list-item {
      overflow: hidden;
      margin-left: -1%;
      .list {
        float: left;
        width: 48%;
        margin:20rpx 0 0 1%;
        border: solid 1px #eaeaea;
        background-color: #ffffff;
        border-radius: 12rpx;
        .list-img {
          image {
            object-fit: fill;
            width: 100%;
            border-top-left-radius: 12rpx;
            border-top-right-radius: 12rpx;
            height: 364rpx;
          }
        }
        .list-con {
          padding: 15rpx;
          .list-foot {
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &>view {
              font-size: 26rpx;
              display: flex;
              align-items: center;
            }
            .username {
              color: #999999;
              margin-left: 10rpx;
              width: 150rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .user {
              width: 50rpx;
              height: 50rpx;
            }
            .likenum {
              color: #333333;
              margin-left: 10rpx;
            }
            .like {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }
      }
    }
</style>