list标签

更新时间：2020-05-26 15:12:26 作者：米拓建站

## 概述：
通过list标签调用数据集合，可循环输出数据集合中的内容。
## 使用范围：
所有模板文件页面，并且可与其他模板标签嵌套使用。
## 类型：
功能标签，用于循环调用数据集合内容的标签。
## 语法：
### 循环调用`$result`数据集合中的内容

<list data="$result" num="10">//$result为数据集合，可参考https://doc.metinfo.cn/mb/mbtag/82.html
        <h4>{$val.title}</h4>
    </list>

### 多个`list标签`嵌套在同一个tag标签中

//特殊情况（多个list标签嵌套在同一个tag标签中）
    <tag action="product.list" num="$c['met_product_list']">// 产品模块列表页内容列表标签，具体请参考请参考文档https://doc.metinfo.cn/mb/mbtag/68.html
    <list data="$v['displayimgs ']"  name='$img'>// $v['displayimgs ']为该条内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染
          <img src="{$img.img}" alt="{$v.title}">
          </list>
            <list data="$v['para']" name='$para'>// $v['para']为该条内容的参数，相当于一个数组，可通过<list></list>标签渲染
                <if value="$para['value']">
                <p>{$para.name}:{$para.value}</p>
                </if>
     </list>
    </tag>
    
### `list标签`嵌套在另一个list标签中

//特殊情况（list标签嵌套在另一个list标签中）
    <tag action='search.option'></tag>// 获取搜索配置数据$search（具体参考文档https://doc.metinfo.cn/mb/mbtag/74.html）
    <list data="$search['para']">// 循环调取参数筛选列表$search['para']
    // $val包含了每条参数的所有数据，相当于一个数组，可以通过{$val.字段名}的方式来渲染参数数据
    <div>
        {$val.name}：//参数名称
        <ul>
            <list data="$v['list']" name="$attr" >// 循环调取参数值列表$search['para']
    // 这个list标签里不能再用$val去调用参数值的数据，所以定义name="$attr"，$attr包含了每条参数值的所有数据，相当于一个数组，可以通过{$attr.字段名}的方式来渲染参数数据
                <li><a href="{$attr.url}" title="链接关键词">{$attr.name}</a></li>//{$attr.url}：参数值链接；{$attr.name}：参数值名称
            </list>
    </ul>
    </div>
    </list>

【说明】
- list标签中对应的参数及选项值可参考下面的`参数说明`；
- list标签中的数据内容，可通过自定义的name参数值$val数组及对应的字段获取，具体可参考下方的`$val数组`。
- 多个list标签嵌套在同一个tag标签中或list标签嵌套在另一个list标签中时，list标签的name参数值不能跟该tag标签的$v、$m或者其他list标签的name参数值相同，详情见语法代码中的特殊情况。

## 标签原理：
list用于循环调用数据集合中的内容，其功能与js中的for函数类似。
在list标签的内部书写待渲染的html标签，$val为每个循环变量的别名，包含了每条内容的数据。
**list标签：**

<list data="$result" num="10">//$result为数据集合
        <a href="{$val.url}" title="{$val.title}">{$val._title}</a>//通过$val数组调用内容数据
    </list>

**for函数：**

for(i=0;i<result.length;i++){
    document.write('<a href="'+result[i][‘url]+'" title="'+result[i]['title]+'">'+result[i]['_title]+'</a>'
    );
    }

总结：list标签在传入指定参数后会返回内容数据，在内部编写html代码，并使用$val变量来获取每个内容的数据，这样我们就可以得到一段动态的包含内容内容的html代码了。
## 参数说明：
list标签，可通过传入不同的参数值，来调用对应的内容，参数选项值如下：

|参数名|是否必填|默认值|说明|
|:----    |:-------    |:---|:---|
|data|是 |null|要循环的数组
|name|否 |$val|标签中调用内容数据的变量名，可自定义，如传入的是 $a, 则标签中调用数据为 {$a.字段名}的格式
|num|否|默认为10（建议根据实际需求将num自定义的尽可能大一点（例如100），以免超过10条的内容调不出来）|循环输出内容的大条数

## $val数组：
`$val`是list标签name参数的值，可自定义成其他名称。
`$val`是一个数据的集合，是数组的形式。
`$val`数组中包含的字段没有固定字段，取决于data参数传入的数据中包含哪些字段，具体参考传入数据对应的文档。
【注意】 嵌套使用list标签时，list标签的name参数值不能跟该tag标签的$v、$m或者其他list标签的name参数值相同，详情见语法代码中第二、三种语法。
## 示例：
### 如何同时循环调用多个数组中的内容
**场景案例：**在产品列表页，循环调用每个产品对应的参数及展示图。
解决方案：①先通过“[tag 产品内容列表](https://doc.metinfo.cn/mb/mbtag/68.html "tag 产品内容列表")”标签获取产品模块列表页内容列表数据集合，②数据集合中的产品参数和展示图是数组类型数据，所以需要对应的list标签循环渲染出来。

**模板代码：**

<ul class="met-pager-ajax">// 内容列表用ul、li标签的格式，可根据自己需求修改;列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <tag action="product.list" num="$c['met_product_list']">// 内容列表标签，具体请参考请参考文档https://doc.metinfo.cn/mb/mbtag/68.html
    // $v包含了每条内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染内容数据
    <li>
        <div>
           <list data="$v['displayimgs']"  name='$img'>// $v['displayimgs ']为该条内容的所有展示图片，相当于一个数组，可通过<list></list>标签渲染
    // $img包含了每条展示图片的所有数据，相当于一个数组，可以通过{$img.字段名}的方式来渲染内容数据
          <img src="{$img.img}" alt="{$v.title}">//{$img.img}为每张展示图片的路径
          </list>
            </div>
            <list data="$v['para']" name='$para'>// $v['para']为该条内容的参数，相当于一个数组，可通过<list></list>标签渲染
    <if value="$para['value']">// 通过<if></if>标签判断参数有值的情况才显示参数内容，if用法具体参考if标签文档https://doc.metinfo.cn/mb/mbtag/85.html
    // $para包含了每个参数的所有数据，相当于一个数组，可以通过{$para.字段名}的方式来渲染内容数据
                <p>{$para.name}:{$para.value}</p>// $para.name为参数名称，$para.value为参数值
                </if>
           </list>
    </li>
    </tag>
    </ul>

【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul>
    <li>
    <div>
        <img src="../upload/201801/1515574797.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
    <img src="../upload/201801/1515574798.jpg" alt="Lenovo/联想一体机电脑I5-6400T" title="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <p>台式机类型 : 游戏影音</p>
    <p>屏幕尺寸 : 23英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    <li>
    <div>
        <img src="../upload/201801/1515574897.jpg" title=华为HUAWEI平板 M3" alt="图片关键词">
    <img src="../upload/201801/1515574898.jpg" title="华为HUAWEI平板 M3" alt="图片关键词">
        // 实际可能有多张，此处示例只列出两张图片
    </div>
    <p>屏幕类型 : IPS屏</p>
    <p>屏幕尺寸 : 8.4英寸</p>// 实际可能有多条参数，此处示例只列出两条参数
    </li>
    // 实际可能有多条，此处示例只列出两条内容
    </ul>
    
### 如何循环调用数组中的内容
**场景案例：**在招聘模块列表页，调用当前栏目下的所有招聘职位。
**解决方案：**①先通过“[tag 招聘内容列表](https://doc.metinfo.cn/mb/mbtag/68.html "tag 招聘内容列表")”标签获取招聘模块内容列表数据集合，②招聘职位非数组类型，可直接通过list标签循环渲染出来。

**模板代码：**

<tag action="job.list" num="$c['met_job_list']" cid="$data['classnow']"></tag>// 内容列表标签，先获取招聘内容列表（详情请查看文档https://doc.metinfo.cn/mb/mbtag/71.html），列表变量为$result
    <ul class="met-pager-ajax">// 列表的父元素必须加上类名met-pager-ajax，这是与列表分页按钮功能相关的
    <list data="$result">//内容列表$result相当于一个数组（具体请查看文档https://doc.metinfo.cn/mb/mbtag/82.html），可通过<list></list>标签渲染
    // $val包含了每条内容的所有数据，相当于一个数组，可以通过{$val.字段名}的方式来渲染内容数据
        <li>
        <h4><a href="{$val.url}" position="{$val.position}" title="链接关键词">{$val._position}</a></h4>
    </li>
    </list>
    </ul>

【注意】实际编写时请去掉注释文字。

**前台页面输出HTML：**

<ul class="met-pager-ajax">
    <li>
        <h4><a href="../job/showjob.php?lang=cn&id=2" position="市场开拓主任" title="链接关键词"><span>市场开拓主任</span></a></h4>
    </li>
    // 实际可能有多条，此处示例只列出一条内容
    </ul>
	
	
### 如何循环调参数及参数值
**场景案例：**产品模块列表页调用筛选参数列表和参数值列表

因筛选参数列表变量$search['para']为数组形式，故需要用list标签循环渲染出来，该list标签循环的参数数据$v中，其参数值列表$v['list']为数组形式，所以也需要用list标签循环渲染出来，该list标签会嵌套在筛选参数的list标签中，具体代码请参考[tag 参数筛选](https://doc.metinfo.cn/mb/mbtag/74.html "tag 参数筛选")文档。