uniapp u-view 二级导航如何实现？

            
 一级导航，判断城市         
<view class="location">
            <u-row>
                <view class="" @click="showPicker(index)" isLink style="text-align:center; padding:20rpx 0rpx">
                    <u-row>
                        <view>

                            <u-icon name="map" :label="'当前城市：'+myCity" labelSize="28rpx"></u-icon>
                        </view>
                        <view class="">

                            <u-icon name="arrow-right"></u-icon>
                        </view>
                    </u-row>
                </view>

                <u-picker :show="show1" :columns="columns1" closeOnClickOverlay @cancel="cancel" @confirm="confirm"
                    @close="close" @change="change" title="选择当前城市" :defaultIndex="[0]"></u-picker>
            </u-row>

        </view>


  这个是二级导航渲染， 由于一开始设计的不好，这里单独渲染了，
    <!-- #ifdef MP-WEIXIN -->
            <u-sticky :offset-top="topheight">
                <view class="sticky_content">
                    <u-tabs lineWidth="40rpx" lineHeight="10rpx" :list="list3" @change="navTab" :current="currentIndex">
                    </u-tabs>
                </view>
            </u-sticky>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <u-sticky :offset-top="topheight" :customNavHeight="0">
                <view class="sticky_content">
                    <u-tabs lineWidth="40rpx" lineHeight="10rpx" :list="list3" @change="navTab"></u-tabs>

                </view>

            </u-sticky>

            <!-- #endif -->


            <view class="contentInfo" @click='goContent' v-for="(item,index) in rentInfo" :key="index"> //渲染rentInfo数据


JS
props: ["rentlists", "theCity"], //父组件的数据
currentIndex: 0, //这里当点击城市切换时，由于一开始设计原因，他们 一级和二级 两个是独立的要设计一个index 是赋给u-tabs让其点击城市后让标签回到第一个，
                list3: [{
                    name: '单间',
                    city: '深圳',

                }, {
                    name: '一室一厅',
                    city: "深圳"
                }, ],
                columns1: [
                    ['深圳市', '惠州市']
                ],
       
 //需要监听从主组件来的城市信息，         调用wx地址接口
 watch: {
            theCity: {

                handler: function(newVal) {
                    this.myCity = newVal;
                },
                deep: true,
                immediate: true
            },

    navTab(index) {
                if (index == undefined) {  //这里是为created一开始调用index不存在所以附上初值
                    this.currentIndex = 0
                } else {
                    this.currentIndex = index.index;
                }

                this.rentInfo = Array.from(this.rentlists).filter(item => item.homeType == index.name && item.city ==
                    this.myCity);  /一二级导航筛选出来
                this.currentChoice == index.name
               

            },
uview的一级导航的方法，
            confirm(e) {
                // console.log('confirm', e);
                this.show1 = false
                this.myCity = e.value[0]
                this.rentInfo = Array.from(this.rentlists).filter(item => item.homeType == this.list3[0].name && item
                    .city ==
                    this.myCity);
                this.currentIndex = 0;  //点击一级导航时，二级导航可能还在原来的位置，需要刷新重置，否则数据和导航内容不同
                console.log(this.currentChoice)
            },

created（）{
            this.rentInfo = Array.from(this.rentlists).filter(item => item.homeType == this.list3[0].name && item.city ==
                this.myCity);
           //一开始调用一下附上初值


        },}

由于为了一些性能原因，所以从前端一次性获取后就不再请求数据库了，所以过滤数组写的比较乱，加上设计的时候并没设计好，导致有些步骤比较麻烦，但是总体思路就是

三级导航，先从后台把二级导航的内容一次性加载出来， 然后写一个方法，created的时候先附上初值， 当点击一级导航的时候对二级导航进行判断渲染，