快应用list组件的那些事儿

Labradors 发布于2019-08-23 13:47 / 1689人阅读

摘要：本文是个人近段时间在开发快应用过程中，对快应用的组件使用的一些体会和踩坑的记录。会简要分析一下快应用中组件是怎样优化和渲染视图的原理。

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

list组件的使用方法

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


    
        content{{$item}}

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

编译器报错

应用报错

官方文档上注明的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中有不同的结构的情况，那么问题来了，当原生端要复用的时候，结构并不相同，于是就会导致报错，严重的时候甚至会出现应用闪退。目前快应用的报错机制对前端开发者不太友好，这种错误往往会让你看的一脸懵逼。比如下面这种：

代码


    
        
            content{{$item}}

报错截图

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

用list模拟scrollview

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


    
        
            
                content{{$item}}

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99565.html

谈谈Spring-Data的那些事儿

摘要：什么是呢全称，是提出的一个对象持久化规范，各应用服务器自主选择具体实现。仅仅只是一个规范，而不是产品使用本身是不能做到持久化的。只要提供了持久化类与表的映射关系，框架在运行时就能参照映射文件的信息，把对象持久化到数据库中。我们在进行事务处理往往需要和数据库进行交互，这其中有关系型数据库（MySql，Sql Server，Oracle）或者是非关系型数据库（Redis，Hadhoop）...

chinafgj 2019-08-16 10:59 评论0 收藏0
谈谈Spring-Data的那些事儿

摘要：什么是呢全称，是提出的一个对象持久化规范，各应用服务器自主选择具体实现。仅仅只是一个规范，而不是产品使用本身是不能做到持久化的。只要提供了持久化类与表的映射关系，框架在运行时就能参照映射文件的信息，把对象持久化到数据库中。我们在进行事务处理往往需要和数据库进行交互，这其中有关系型数据库（MySql，Sql Server，Oracle）或者是非关系型数据库（Redis，Hadhoop）...

charles_paul 2019-08-06 13:26 评论0 收藏0