ionic tabs内嵌套tabs的奇怪问题

发布于 2022-09-05 15:33:15 字数 4421 浏览 9 评论 0

首页有四个tab组成,然后其中一个tab中还有嵌套了一个tab,然后进入嵌套中的tab页面,刷新订单列表页面会跳转到index.main这个路由,很是奇怪,求解答。

首页tab

<ion-view>
        <ion-tabs class="tabs-icon-top index-tabs" ng-class="{'tabs-item-hide': hideTabs}">

            <ion-tab title="首页" icon-on="icon-index-tab icon-tabs-main-on" icon-off="icon-index-tab icon-tabs-main-off" ui-sref="index.main">
                <ion-nav-view name="main">

                </ion-nav-view>
            </ion-tab>

            <ion-tab title="分类" icon-on="icon-index-tab icon-tabs-category-on" icon-off="icon-index-tab icon-tabs-category-off" ui-sref="index.category">
                <ion-nav-view name="category">

                </ion-nav-view>
            </ion-tab>

            <ion-tab title="购物车" icon-on="icon-index-tab icon-tabs-cart-on" icon-off="icon-index-tab icon-tabs-cart-off" ui-sref="index.cart">
                <ion-nav-view name="cart">

                </ion-nav-view>
            </ion-tab>

            <ion-tab title="我的" icon-on="icon-index-tab icon-tabs-ucenter-on" icon-off="icon-index-tab icon-tabs-ucenter-off" ui-sref="index.ucenter">
                <ion-nav-view name="ucenter">

                </ion-nav-view>
            </ion-tab>

        </ion-tabs>
</ion-view>

UCenter下面的页面嵌套的tab

<ion-view>
    <div class="tabs order-type-nav tabs-top">
        <a class="tab-item order-type-item" ui-sref="index.order.list({type:1})" ui-sref-active="active">
            全部订单
        </a>
        <a class="tab-item order-type-item" ui-sref="index.order.list({type:2})" ui-sref-active="active">
            待付款
        </a>
        <a class="tab-item order-type-item">
            待发货
        </a>
        <a class="tab-item order-type-item">
            待收货
        </a>
        <a class="tab-item order-type-item">
            待评价
        </a>
    </div>
    <ion-nav-view name="list" class="has-header"></ion-nav-view>
</ion-view>

路由配置

$stateProvider
    .state('index', {
      url: '/index',
      views: {
        'index': {
          templateUrl: "../app/views/tabs/tabs.html"
        }
      }
    })
    .state('index.main', {
      url: '/main',
      views: {
        'main': {
          templateUrl: "../app/views/tabs/main.html"
        }
      },
      data: {
        pageTitle: '天禧珠宝'
      }
    })
    .state('index.category', {
      url: '/category',
      views: {
        'category': {
          templateUrl: "../app/views/tabs/category.html"
        }
      },
      data: {
        pageTitle: '全部分类'
      }
    })
    .state('index.cart', {
      url: '/cart',
      views: {
        'cart': {
          controller: 'cartCtrl',
          templateUrl: "../app/views/tabs/cart.html"
        }
      },
      data: {
        pageTitle: '购物车'
      }
    })
    .state('index.ucenter', {
      url: '/ucenter',
      views: {
        'ucenter': {
          templateUrl: "../app/views/tabs/ucenter.html"
        }
      },
      data: {
        pageTitle: '个人中心'
      }
    })
    .state('index.product-list', {
      url: '/product/list',
      views: {
        'category': {
          templateUrl: "../app/views/product/list.html"
        }
      }
    })
    //产品列表跳转到详情页
    .state('index.product-details', {
      url: '/produt/details',
      views: {
        'category': {
          templateUrl: "../app/views/product/details.html"
        }
      },
      data: {
        pageTitle: '产品详情'
      }
    })
    //首页跳转到产品页
    .state('index.details', {
      url: '/produt-details',
      views: {
        'main': {
          templateUrl: "../app/views/product/details.html"
        }
      },
      data: {
        pageTitle: '产品详情'
      }
    })
    .state('index.order', {
      url: '/order',
      views: {
        'ucenter': {
          templateUrl: "../app/views/order/tabs.html"
        }
      },
      data: {
        pageTitle: '我的订单'
      }
    })
    //全部订单
    .state('index.order.list', {
      url: '/list/:type',
      views: {
        'list': {
          controller: 'orderListCtrl',
          templateUrl: "../app/views/order/list.html"
        }
      },
      data: {
        pageTitle: '订单列表'
      }
    })

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文