大家好，这是小程序系列的第二十篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，从本文开始，将记录分享lin-ui的源码分析，期望通过对lin-ui源码的学习能加深组件化开发的能力：
1.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（一）
2.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（二）
3.《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（三）
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～

前言

上几篇我们介绍了 Transition动画组件 的用法，内部的实现以及钩子函数的实现，了解完 Tansition组件 的核心 我们能学到：

• 第一点：CSS动画，Transition组件使用CSS完成了该组件的隐藏/显示；
• 第二点：多组动画之间的依次执行方式，这一点我觉得是 最大的收获，毕竟项目中很多时候也会有这种动画，transition组件 利用Promise的特性实现了延迟 这么个功能，它可以 延迟来为添加类名增加顺序，并完成对应的CSS动画；

这篇开始我们将学习 第四个组件List，List是界面中最最常用的组件之一，几乎所有界面都会用到list或者list的变种，耐心看完，你一定有所收获～

阅读对象与难度

本文难度属于：初级，通过本文你可以了解到 Lin-ui的List组件的基本用法，了解List组件的属性的用法，插槽的用法，事件的用法，我们只有 先了解了List组件的基本用法，才能依据用法去进一步了解内部的实现，本文主要内容参考以下思维导图：

基本用法

<l-list />
1

当然，正常不可能这么用，一般会有标题，或者描述

 <l-list title="客服中心" desc="工作时间:9:00 - 18:00"></l-list>
1

效果如下:

当然，肯定也是支持列表渲染的

<l-list wx:for="{{list}}" wx:for-item="item" title="{{item.title}}" wx:key="value"></l-list>
1

看得出来，效果还是不错的～接来下我们详细看一个各个属性

属性

List组件的属性比较多，一共有 23个，下面我们就分步了解，首先是Icon相关的

Icon相关

这个类属性主要应用于为 list 的文字 前侧添加icon图标，主要涉及的属性为3个

看个综合和例子吧

<!--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>
1
2
3
4
5
6
7
8
9
10

这三个属性和我们之前了解的 Button组件 一样，用法也完全一致，当然内部肯定也是借助于ICON组件实现的…
当然，除了正常的内置icon，也可以自定义左侧的图片

image属性

<l-list title="客厅" image="/pages/images/123.png" />
1

通过设置 image属性 可以自定义前置的图片样式，上例中就是指向的是images下的123.png图片，效果如下

标题与描述

也就是 title 和 desc，这两个属性其实在上面已经说了，说明如下

title 和 desc 代码演示这是如上例一样就过多介绍了

<l-list title="客服中心" desc="工作时间:9:00 - 18:00"></l-list>
1

主要是 right-desc，这是一个描述位置处于 列表右侧的表述，代码示例如下

<l-list title="客服中心" right-desc="工作时间:9:00 - 18:00"></l-list>
1

标签属性

标签属性一共有 五个，可以给列表 定制化添加一些标签功能，具体说明如下

看个示例吧，更容易理解一点

<l-list 
  title="商城" 
  desc="工作时间:9:00 - 18:00" 
  tag-content="全新"
  tag-color="red"
  tag-plain="{{true}}"
  tag-shape="circle"
  tag-position="right"
/>
1
2
3
4
5
6
7
8
9

效果图如下

简单的说：tag-content 用于 显示的标签内容，tag-color 控制 标签的颜色（默认的颜色是蓝色），tag-plain 控制是 镂空 还是 填充，tag-shape 则是 控制标签是圆形还是方形，tag-position 控制的是位置；

徽标属性

徽标属性 常用于 消息通知 里，它可以显示一个小小的数字提示，主要的应用场景应该是消息提示类的，先看详细说明吧

再看个示例

<l-list 
  title="消息" 
  icon="notification"
  badge-count-type="overflow"
  badge-position="right"
  dot-badge="{{false}}"
  badge-count="99"
  badge-max-count="{{999}}"
/>
1
2
3
4
5
6
7
8
9

效果图如下

当然，可能会有小伙伴问，如果想显示 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}}"
/>
1
2
3
4
5
6
7
8
9

路由属性

列表代表的 交互场景，绝大部分都是 路由跳转，那么 list组件 自然也是存在这些属性的

代码示例

 <l-list 
  title="消息" 
  icon="notification"
  is-link="{{false}}"
  link-type="redirectTo"
  url="../welcome/index"
/>
1
2
3
4
5
6
7

注意的是，is-link 这个属性控制的是 列表后面箭头，值为 false 则会隐藏箭头

url的值为跳转页面的路径，比如上例设置了这个路径并且跳转类型设置为了redirectTo，那么当点击时等同于

wx.redirectTo({
  url: '../welcome/index'
})
1
2
3

样式属性

该类属性的作用为设置列表的一些样式，主要就是 边距，其实样式可以通过class进行覆盖，并非一定需要通过样式属性，该类属性一共有 4个

示例代码如下：

<l-list 
  title="消息" 
  icon="notification"
  gap="{{100}}"
/>
<l-list 
  title="消息" 
  icon="notification"
  left-gap="{{100}}"
/>
<l-list 
  title="消息" 
  icon="notification"
  right-gap="{{100}}"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

问题

这应该是一个BUG，不知道为什么，left-gap与right-gap同时设置时属性会不生效，源码分析时，我们仔细看一下这个属性的实现，看看是不是有什么问题

事件

List 的事件只有一个，点击事件

用法也很简单，就是简单的绑定，代码如下：

<l-list 
  title="消息" 
  icon="notification"
  left-gap="{{100}}"
  right-gap="{{100}}"
  bind:lintap="handleClick"
/>
1
2
3
4
5
6
7

小结

本文分享了 List组件 的基本用法，包括 23个属性 和 事件，了解后我们应该能基本掌握这个组件的用法了，期间我们在样式属性中还发现了一个可能算是BUG的问题，后续我们在源码分析阶段看一下是否真的存在；
（PS：由于参加了小程序知识树的建设，后续可能会穿插一些 uni-app组件 的相关知识点）
(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)