Question

在Ionic中，我们可以为列表视图执行类似的操作：

<ion-list>
    <ion-item href="#">
        Butterfinger
    </ion-item>
</ion-list>

也是这样：

<div class="list">
    <a class="item" href="#">
        Butterfinger
    </a>
</div>

这两个基本上输出相同的布局。这两个有什么区别？使用div方法做到这一点会带来更好的性能吗？如果是，那么为什么ion-list？

Answer 1

在使用<ion-list>和<div class="list">之间，CSS样式的观点（儿童文本上的一些颜色样式除外）没有任何差异，因为<ion-list>是一个指令，它将呈现{ {1}}在里面。如果你检查元素，你会看到这个（从浏览器元素检查中提取的html）

<div class="list">

正如您在上面的代码中看到的，ion-list生成一个带有列表类的div。另外，请参阅<ion-list> <div class="list"> <ion-item href="#" class="item item-complex"> <a class="item-content" ng-href="#" href="#"> Butterfinger </a> </ion-item> </div> </ion-list>的{{3}}，它会让事情变得更加清晰。我只是从源代码共享一行来显示该指令呈现的模板

ion-list

两者之间没有任何性能差异，但如果您不想使用var listEl = jqLite('<div class="list">')的api并希望在进行自定义时对元素有更多控制权，我建议您使用<div class="list">。
就您的问题“为什么ion-list”而言，该指令使您可以访问API中的许多选项。文档页面底部列出的API方法（例如source code）让您了解该指令允许您执行的操作，而不仅仅是使用与该类关联的CSS。引自文档

但是，使用ionList和ionItem指令可以轻松实现支持各种交互模式，如滑动编辑，拖动到重新排序和删除项目。

结论：所以它完全取决于你的要求，是否使用指令或在div上使用简单的类。

Ionic ion-list vs .list

1 个答案: