uni-app结合uView滑动切换页面

<template>
    <view>
        <view class="top u-padding-top-10">
            <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#d4a464"></u-tabs>
        </view>
        
        <view class="swiper-bottom bg_white">
         <swiper 
          :duration="500" 
          :current="current" 
          :data-index='current' 
          @change="toggle"  circular style="height: 100vh">
            <swiper-item >
      <view class="uni-flex uni-row item" style="-webkit-justify-content: space-between;justify-content: space-between;">
                    <view class="text u-font-32">图文咨询 PAY20201204108876</view>
                    <view class="text grey9">已取消</view>
       </view>
  <view class="item">
                    <view class="text u-font-30">心率过快是什么原因</view>
                    <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
                        <view class="text grey9">5个回答</view>
                        <view class="text grey9">2020-11-25</view>
                    </view>
                </view>
                
                <view class="item">
                    <view class="text u-font-30">心率过快是什么原因</view>
                    <view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
                        <view class="text grey9">5个回答</view>
                        <view class="text grey9">2020-11-25</view>
                    </view>
                </view>
                
            </swiper-item>
            <swiper-item>
                <!-- 按顺序对应第二个的内容 -->
                2222222
            </swiper-item>
            <swiper-item>
                <!-- 按顺序对应第三个的内容 -->
                3333333
            </swiper-item>
        </swiper>

    </view>
</view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待支付'
                }, {
                    name: '待到诊'
                }, {
                    name: '已完成',
                }, {
                    name: '已取消',
                }, ],
                current: 0,

            }
        },
        methods: {
            change(index) {
                this.current = index;
            },
            // 切换触发的事件
            toggle(e) {
                this.current = e.detail.current;
            },
        }
    }
</script>

<style lang="scss">
    page {
        background: $bg;
    }
    
    .item {
        border-bottom: 1px #ececec solid;
        padding: 20rpx 0;
    }
    .top {
        background: #FFFFFF;
        height: 100rpx;
        position: fixed;
        left: 0;
        top: 80rpx;
        right: 0;
        box-shadow: 0px 10px 10px -10px #efefef;
        z-index: 999;
    }
    .swiper-bottom{
        margin-top: 110rpx;
        padding: 20rpx;
        width: 100%;
        height: 100%;
        position: relative;
        
    }

</style>