快应用list组件的那些事儿

最新推荐文章于 2024-12-21 10:04:10 发布

原创最新推荐文章于 2024-12-21 10:04:10 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#快应用

快应用技术分享同时被 2 个专栏收录

37 篇文章

订阅专栏

快应用技术分享

27 篇文章

订阅专栏

本文探讨了在快应用开发中使用list组件的经验与注意事项。作者警告避免在list-item内使用if，因为可能导致结构变化和复用问题，推荐使用show属性。此外，还介绍了如何利用list模拟scrollview进行水平滚动，并提到了columns属性在实现瀑布流布局中的作用。阅读更多关于快应用的开发技巧和最佳实践。

本文作者：dadong

本文是我在开发快应用过程中，对快应用的list组件使用的一些体会和踩坑的记录。会简要分析一下快应用中list组件优化和渲染视图的原理。希望能给你开发快应用带来一些帮助。

list组件的使用方法

首先我们来看一看快应用中list组件的使用方法

<list>	
    <block for="[1,2,3]">	
        <list-item type="item"><text>content{{$item}}</text></list-item>	
    </block>	
</list>

list只接受list-item和block作为子组件，如果出现其他组件标签，应用会无情的抛出报错。

编译器报错

640?wx_fmt=png

应用报错

640?wx_fmt=png

官方文档上注明的list子组件只有list-item，实际上block也是可以的，原因在于block组件实际上是表达逻辑区块的组件，没有对应的Native组件。

别在list-item中用if

注意：请尽量不要在list-item里面用if来控制元素的显示逻辑

因为list组件原生端做了很多优化，为了提升长列表的性能，type相同的list-item会被复用，也就是说内存中驻留的list-item是有限的，不会随着列表数据增多而变得占用太多内存，这本来是一个非常棒的事情，让开发者不用考虑一个列表中数据太大导致拖慢整个应用速度的问题，也不用考虑没显示出来的list-item的懒加载，因为原生端把这些工作都做了，所以list组件是个非常强大的组件。

但是，成也萧何败萧何，由于list-item相同的会被复用，所以一旦你在list-item中用了if来控制元素的显示逻辑，由于if的控制会导致结构的变化，所以会出现相同list-item中有不同的结构的情况，那么问题来了，当原生端要复用的时候，结构并不相同，于是就会导致报错，严重的时候甚至会出现应用闪退。这种错误往往会让你看的一脸懵逼。比如下面这种：

<list>	
    <block for="[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]">	
        <list-item style="height: 200px;" type="item">	
            <text if="$item === 1">content{{$item}}</text>	
            <image if="$item === 3" src="https://doc.quickapp.cn/assets/images/logo.png"></image>	
        </list-item>	
    </block>	
</list>

报错截图

640?wx_fmt=png

那么我们怎么来实现list-item内部控制元素的显示呢，答案是用show属性，因为show属性不改变元素结构，只显示隐藏元素。

用list模拟scrollview

快应用中没有scrollview组件，所以很多需要滚动的场景就需要用list组件来模拟，垂直滚动的实现很简单，因为list默认就是垂直滚动的，只要设置高度就好了，这里就不再赘述，主要讲一下水平滚动的实现。

<div class="box">	
    <list class="list">	
        <block for="[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]">	
            <list-item class="item" type="item">	
                <text>content{{$item}}</text>	
            </list-item>	
        </block>	
    </list>	
</div>

.list {	
    height: 300px;	
    flex-direction: row;	
    .item {	
        width: 100px;	
    }	
}

其实最关键的就是给list组件设置样式flex-direction: row就能快速地把垂直滚动变成水平滚动。

此外list还支持一个columns属性，这个属性可以帮助我们快速实现瀑布流的布局，当然这些文档中都有提到。建议大家把文档中list教程看一下，会对list的使用有更深的体会。

相关阅读：

写在最后

在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！

快应用生态平台

赋能开发者

拓展场景未来

640?wx_fmt=jpeg

快来关注我们吧