大家好，这是小程序系列的第二十篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，从本文开始，将记录分享lin-ui的源码分析，期望通过对lin-ui源码的学习能加深组件化开发的能力：
1.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（一）
2.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（二）
3.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（三）
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
前言
上几篇我们介绍了 Transition动画组件 的用法，内部的实现以及钩子函数的实现，了解完 Tansition组件 的核心 我们能学到：
- 第一点：CSS动画，Transition组件使用CSS完成了该组件的隐藏/显示；
- 第二点：多组动画之间的依次执行方式，这一点我觉得是 最大的收获，毕竟项目中很多时候也会有这种动画，
transition组件利用Promise的特性实现了延迟 这么个功能，它可以 延迟来为添加类名增加顺序，并完成对应的CSS动画；
这篇开始我们将学习 第四个组件List，List是界面中最最常用的组件之一，几乎所有界面都会用到list或者list的变种，耐心看完，你一定有所收获～
阅读对象与难度
本文难度属于：初级，通过本文你可以了解到 Lin-ui的List组件的基本用法，了解List组件的属性的用法，插槽的用法，事件的用法，我们只有 先了解了List组件的基本用法，才能依据用法去进一步了解内部的实现，本文主要内容参考以下思维导图：
基本用法
<l-list />
当然，正常不可能这么用，一般会有标题，或者描述
<l-list title="客服中心" desc="工作时间:9:00 - 18:00"></l-list>
效果如下:
当然，肯定也是支持列表渲染的
<l-list wx:for="{{list}}" wx:for-item="item" title="{{item.title}}" wx:key="value"></l-list>
看得出来，效果还是不错的～接来下我们详细看一个各个属性
属性
List组件的属性比较多，一共有 23个，下面我们就分步了解，首先是Icon相关的
Icon相关
这个类属性主要应用于为 list 的文字 前侧添加icon图标，主要涉及的属性为3个
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| icon | 图标的文件名 | String | - | |
| icon-color | 图标的颜色 | String | - | 28 |
| icon-size | 图标的尺寸大小 | String | - |
看个综合和例子吧
<!--pages/list/index.wxml-->
<view class="list-container">
<l-list
wx:for="{{list}}" wx:for-item="item"
icon="{{item.icon}}"
icon-color="#333333"
icon-size="28"
title="{{item.title}}"
wx:key="value" ></l-list>
</view>
这三个属性和我们之前了解的 Button组件 一样，用法也完全一致，当然内部肯定也是借助于ICON组件实现的…
当然，除了正常的内置icon，也可以自定义左侧的图片
image属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| image | 引入的图片路径 | String | - |
<l-list title="客厅" image="/pages/images/123.png" />
通过设置 image属性 可以自定义前置的图片样式，上例中就是指向的是images下的123.png图片，效果如下
标题与描述
也就是 title 和 desc，这两个属性其实在上面已经说了，说明如下
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 列表组件中左侧文本的内容 | String | - | - |
| desc | 列表组件中左侧描述文本的内容 | String | - | - |
| right-desc | 列表组件中右侧描述文本的内容 | String | - | - |
title 和 desc 代码演示这是如上例一样就过多介绍了
<l-list title="客服中心" desc="工作时间:9:00 - 18:00"></l-list>
主要是 right-desc，这是一个描述位置处于 列表右侧的表述，代码示例如下
<l-list title="客服中心" right-desc="工作时间:9:00 - 18:00"></l-list>
标签属性
标签属性一共有 五个，可以给列表 定制化添加一些标签功能，具体说明如下
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| tag-position | 标签显示的位置 | String | right/left | left |
| tag-content | 标签的内容 | String | - | - |
| tag-shape | 标签的形状 | String | square、 circle | square |
| tag-color | 标签的颜色 | String | - | - |
| tag-plain | 标签是否镂空 | Boolean | - | false |
看个示例吧，更容易理解一点
<l-list
title="商城"
desc="工作时间:9:00 - 18:00"
tag-content="全新"
tag-color="red"
tag-plain="{{true}}"
tag-shape="circle"
tag-position="right"
/>
效果图如下
简单的说：tag-content 用于 显示的标签内容，tag-color 控制 标签的颜色（默认的颜色是蓝色），tag-plain 控制是 镂空 还是 填充，tag-shape 则是 控制标签是圆形还是方形，tag-position 控制的是位置；
徽标属性
徽标属性 常用于 消息通知 里，它可以显示一个小小的数字提示，主要的应用场景应该是消息提示类的，先看详细说明吧
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| badge-position | 徽标显示的位置 | String | left/right/top/bottom | right |
| badge-count-type | 徽标数字的显示方式 | String | overflow/limit/custom | overflow |
| dot-badge | 显示圆点徽标 | Boolean | false/true | false |
| badge-count | 徽标的数值 | String | - | - |
| badge-max-count | 徽标数字最大值，超过最大值时显示${max-count}+ | Number | ----- | 99 |
再看个示例
<l-list
title="消息"
icon="notification"
badge-count-type="overflow"
badge-position="right"
dot-badge="{{false}}"
badge-count="99"
badge-max-count="{{999}}"
/>
效果图如下
当然，可能会有小伙伴问，如果想显示 99+ 这种效果怎么办，那么可以将 badge-max-count 设置成小一点，比如
<l-list
title="消息"
icon="notification"
badge-count-type="overflow"
badge-position="right"
dot-badge="{{false}}"
badge-count="100"
badge-max-count="{{99}}"
/>
路由属性
列表代表的 交互场景，绝大部分都是 路由跳转，那么 list组件 自然也是存在这些属性的
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| is-link | 是否显示跳转的图标 | Boolean | false/true | true |
| link-type | 设置跳转类型 | String | navigateTo/redirectTo/reLaunch/switchTab | navigateTo |
| url | 设置跳转的路径 | String | - | - |
代码示例
<l-list
title="消息"
icon="notification"
is-link="{{false}}"
link-type="redirectTo"
url="../welcome/index"
/>
注意的是，is-link 这个属性控制的是 列表后面箭头，值为 false 则会隐藏箭头
url的值为跳转页面的路径，比如上例设置了这个路径并且跳转类型设置为了redirectTo，那么当点击时等同于
wx.redirectTo({
url: '../welcome/index'
})
样式属性
该类属性的作用为设置列表的一些样式，主要就是 边距，其实样式可以通过class进行覆盖，并非一定需要通过样式属性，该类属性一共有 4个
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| gap | 设置list内左右两侧内容距list两边的间距 | Number | - | - |
| left-gap | 设置list内左侧内容距list左边的间距 | Number | - | |
| right-gap | 设置list内右侧内容距list右边的间距 | Number | - | |
| is-hover | 是否显示hover效果 | Boolean | - | true |
示例代码如下：
<l-list
title="消息"
icon="notification"
gap="{{100}}"
/>
<l-list
title="消息"
icon="notification"
left-gap="{{100}}"
/>
<l-list
title="消息"
icon="notification"
right-gap="{{100}}"
/>
问题
这应该是一个BUG，不知道为什么，left-gap与right-gap同时设置时属性会不生效，源码分析时，我们仔细看一下这个属性的实现，看看是不是有什么问题
事件
List 的事件只有一个，点击事件
| 事件名称 | 说明 | 返回值 | 备注 |
|---|---|---|---|
| bind:lintap | 当点击列表时触发 | - | - |
用法也很简单，就是简单的绑定，代码如下：
<l-list
title="消息"
icon="notification"
left-gap="{{100}}"
right-gap="{{100}}"
bind:lintap="handleClick"
/>
小结
本文分享了 List组件 的基本用法，包括 23个属性 和 事件，了解后我们应该能基本掌握这个组件的用法了，期间我们在样式属性中还发现了一个可能算是BUG的问题，后续我们在源码分析阶段看一下是否真的存在；
（PS：由于参加了小程序知识树的建设，后续可能会穿插一些 uni-app组件 的相关知识点）
(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)