uniapp实现菜单左右二级联动

在支付宝小程序实现左右两个选项卡滑动并且上下滚动要怎么实现呢

一、先实现选项卡左右滑动

1.左右选项视图部分

view class="tab_out">
				
				
				
					<view class="tabs" :class="{tabClick:clickTab==0}"  @click="changepage(0)">
						未接受
					</view>
					<view class="tabs" :class="{tabClick:clickTab==1}" @click="changepage(1)">
						已完成
					</view>
				
				</view>

2.定义方法，通过点击切换

changepage(item) {
				console.log(666);
				this.clickTab = item
				console.log("当前选中",item)
			}

3.设置变换样式

.tabClick {
				border-bottom: 8rpx #FFD66E solid;
				border-radius: 10rpx;
				// padding: 4rpx;
				color: #000;
			}

二、设置滚动

滑动里嵌套滚动视图，且根据开发文档，将滑动视图设为左右滑动，再配上和选项卡一样的参数，就可以实现上下联动了
废话不多说，直接上代码

<swiper  class="con" :vertical="true">
  <!-- 未完成 -->
  <swiper-item v-if="clickTab === 0"  class="con_item">
    <scroll-view scroll-y="true">
      <view class="qunaju" v-for="item in subscribeList" :key="item.id">

        <view class="v_2">
          <view class="mingzi"><p>{{item.name}}</p></view>


        </view>
      </view>
    </view>
    </scroll-view>
  </swiper-item>



  <!-- 已接受 -->
  <swiper-item  v-if="clickTab === 1"  class="con_item">
    <scroll-view scroll-y="true">
      <view class="qunaju" v-for="item in usubscribeList" :key="item.id" >

        <view class="v_2">
          <view class="mingzi"><p>{{item.name}}</p></view>



        </view>
      </view>
    </view>
    </scroll-view>
  </swiper-item>
</swiper>