滑动列表可以包含类别和子类别吗?

时间:2018-08-12 23:55:22

标签: ionic-framework ionic3

我使用的是ionic 3,我有一些类别,当您单击一个类别时,您会进入一个子类别,当您单击一个类别时,您会进入一个子类别(如果存在)或所选类别。

我完全可以将它们分成3页,但是我想知道这是否是最好的主意。我发现list enableSlidingItems,并认为这是最好的解决方案,我可以轻松地在一页中创建所有类别。

但是当我尝试实现它时,所有文档看起来都像这样

<ion-content>
  <ion-list show-delete="false" can-swipe="true">
    <ion-item-sliding>
      <ion-item>todo 1</ion-item>
      <ion-item-options side="right">
        <button color="danger" ion-button>
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
    <ion-item>todo 2</ion-item>
    <ion-item>todo 3</ion-item>
  </ion-list>
</ion-content>

此示例有两个问题,似乎只有滑动效果才能显示隐藏的按钮,其次,您不会过渡到此video所示的另一个列表。

除了创建3个不同的页面之外,还有没有更好的选择类别的方法?我想要这种过渡效果,您选择一个类别到另一个列表,但是我不想为其创建其他页面。由于不同的原因,首先,在一个页面上进行管理比较容易,其次,如果管理员添加了新的子子菜单,则必须创建一个新页面来处理该问题。

api看起来像这样,我不认为为每个子类别数组创建一个新页面都是最聪明的解决方案,但找不到另一个。

{
    "category": [
        {
            "name": "Vehicles",
            "parent": 0,
            "sub": [
                {
                    "name": "All in Vehicles",
                    "slug": "vehicles",
                    "parent": 1
                },
                {
                    "name": "Cars",
                    "parent": 2,
                    "sub": [
                        {
                            "name": "All in Cars",
                            "slug": "cars",
                            "parent": 3
                        },
                        {
                            "name": "Alfa Romeo",
                            "slug": "alfa-romeo",
                            "parent": 4
                        },
                        {
                            "name": "Aston Martin",
                            "slug": "aston-martin",
                            "parent": 4
                        }
                    ]
                },
                {
                    "name": "Motorcycles",
                    "parent": 2,
                    "sub": [
                        {
                            "name": "All in Motorcycles",
                            "slug": "motorcycles",
                            "parent": 3
                        },
                        {
                            "name": "Harley Davidson",
                            "slug": "harley-davidson",
                            "parent": 4
                        }

                    ]
                }
            ]
        },
        {
            "name": "Electronics",
            "parent": 0,
            "sub": [
                {
                    "name": "All in Electronics",
                    "slug": "electronics",
                    "parent": 1
                },
                {
                    "name": "phones",
                    "parent": 2
                }
            ]
        }
    ]
}

0 个答案:

没有答案