微信小程序通过template模块和components组件简化列表开发

作为重要的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组件。

文章到此结束，可能讲的比较模糊，但还是希望读这篇文章的人能有所收获。

本文地址：https://blog.csdn.net/blue_fen/article/details/109234408