在Taro编写页面中，使用ScrollView来设置显示一个列表，数据用数组来表示。根据不同的参数（例如是否显示删除按钮，item是否是展开状态等）来区分不同的展示样式或内容。在页面和数组进行初始化（如下图）之后，
初始化数组
有一个按钮（用Text标签来实现）
添加选项组件
点击触发数组添加新元素的方法，如下：
添加新元素的方法
下图为，ScrollView标签下的数组样式展示：（也许这里会有人提出疑问，列表为啥不用FlatList或着其他列表组件呢？我们公司要做的这个项目需要适配React-Native+小程序，而上面提到的FlatList等列表组件是只适用于React-Native端的，所以这个地方选用了这样的一个方式来做列表）
数组展开
遇到的问题：在点击触发添加新选项后，会弹窗提示‘添加新选项’，页面却不能正常渲染出新添加的内容，需要把app退出后台，重新进入时，才会正常显示。也就是其实数组已经添加了新的选项，页面却没有进行渲染，新的选项不能展示出来。
对此修改上述addNewSelect()方法如下：
修改后的添加新选项的方法
在触发添加新选项的方法后，页面可以正常渲染，新选项可以正常显示在页面中。
通过这个问题，同样可以完成数组中的某些字段的修改，比如上述SELECTITEMS中的‘content’字段，修改代码如下：
页面Input控件
修改数组中‘content‘字段方法
至此，数组添加元素和元素进行修改后的页面渲染就完成了。同理，数组删除元素也可以这么写：
删除按钮
删除item的方法
网友评论