作为重要的UI组件——ListView,微信小程序中,列表的实现操作总会让相应页面中的代码显得臃肿,特别是当需要上拉刷新、下拉加载、多选操作的时候。 我开始学小程序的时候,经常会为完成一个列表而花费较多时间。后面实在受不了了,就使用了自定义组件对列表的代码就行封装。下面就是我封装完成的list组件目录。
怎么让一个组件重复列出相同的view,这个困扰了我一段时间,直到后面我在官网里面找到了template。 在for结构中将template的内容循环显示出来,这样就能达到列表显示效果。 (这里is属性用来区分子条目的类型,data属性是传进子条目的数据)
要怎么把每个条目的内容指定到对应的组件中?这还是template的内容。 我定义了list_item.wxml,并把它包含到list.xml中。
list_item.xml文件是用来存放想让列表显示的对应条目,里面放了components组件。这样每个条目的逻辑处理一般不需要在list的js文件中完成,这就分摊了list中的代码。 (这里name对应前面wxml文件中is属性的内容,this-data对应data属性中的内容)
当然,上面存放的组件还得在json文件中注册一下,下面就是我在一个项目中list组件需要注册的组件。
实现步骤基本就这样了,是不是觉得很简单。 上面的代码在项目中能发挥什么作用呢。我认为最大的优点就是简化了代码。下面是我在一个页面的Fragment中写的wxml代码,是不是觉得很简洁。而且在js文件中,由于很多逻辑分摊到了pass-list中,js里面的代码也非常简单。
当然,这还不是最重要的,如上面所说,将上拉属性,下拉加载,多选操作,左滑右滑等等很多逻辑处理都可以放到里面,这就能把它封装成一个强大的list组件。
文章到此结束,可能讲的比较模糊,但还是希望读这篇文章的人能有所收获。
|
请发表评论