## 列表组件 #### 列表组件，主要是针对不同情况下一般的文字列表或者有标签式的列表，如医生列表、科室列表等。 * * * * * 注：列表组件默认有点击变暗效果。若业务中无需点击变暗的效果 可以添加class：rbk-removecolor。 列表组件默认两侧紧贴屏幕。添加属性rbk-role='card'，两侧出现间距； 添加class：rbk-space，列表元素间出现间隔。 列表中标题组件rbk-subtitle，可以添加role="leftcolor"样式。 * * * * * 1、普通静态展示列表  ~~~ <div class="rbk-list"> <div class="rbk-subtitle">静态列表list</div> <div class="rbk-listitem">单行列表</div> <div class="rbk-listitem">列表第2项</div> <div class="rbk-listitem">列表第3项</div> <div class="rbk-subtitle">两行列表</div> <div class="rbk-listitem" rbk-role="twoline">列表第3项我的内容比较多，但也不会超过两行，因为加了.rbk-ellipsis-2,mui会自动截断，变成省略号</div> </div> ~~~ 说明：list组件，主要用于内容展示，无链接时使用，也可以加链接navurl（不推荐）。list容器：rbk-list,list标题：rbk-subtitle，list项：rbk-listitem 2、普通静态导航列表  ~~~ <div class="rbk-navlist"> <div class="rbk-navlistitem" navurl="http://www.baidu.com">导航首页1</div> <div class="rbk-navlistitem"> <span class="rbk-morespan">2014-5-12</span> <span class="rbk-morespan">周五 （上午）</span> </div> <div class="rbk-navlistitem"> <span class="rbk-morespan">2014-5-12</span> <span class="rbk-morespan">周五 （上午）</span> </div> </div> ~~~ 说明：navlist组件，主要用于有链接的list，可以加链接navurl。list容器：rbk-navlist,list标题：rbk-subtitle，list项：rbk-navlistitem 注：图示列表前的圆圈符号为UI2.0风格navlist默认样式，在UI3.0风格中废弃了该样式 3、可展开/收缩列表 折叠列表常用样式：默认左侧带小圈圈。添加属性rbk-role='clock'：左侧带时钟图标  ~~~ <div class="rbk-collalist"> <div class="rbk-collalistitem" text="导航标签"> <div class="rbk-navlist"> <div class="rbk-navlistitem" navurl="/index.html">PC方案</a> </div> <div class="rbk-navlistitem" navurl="/index.html">手机方案</a> </div> <div class="rbk-navlistitem" navurl="/index.html">TV方案</a> </div> </div> </div> <div class="rbk-collalistitem" text="列表标签"> <div class="rbk-list"> <div class="rbk-listitem">PC方案</a> </div> <div class="rbk-listitem">手机方案</a> </div> <div class="rbk-listitem">TV方案</a> </div> </div> </div> <div class="rbk-collalistitem" text="自定义标签"> <div class="rbk-table-view" style="padding: 20px;">自定义</div> </div> </div> ~~~ 说明：list容器：rbk-collalist,list项：rbk-collalistitem，标题写在text属性中。展开内容可自定义。 4、基本列表动态绑定doLayout（以navlist为例）  html ~~~ <div class="rbk-navlist"> <div class="rbk-subtitle">动态binding的navlist</div> </div> <div class="rbk-navlist"> <div class="rbk-subtitle">动态binding的navlist模板模式</div> <div class="rbk-navlistitem" tpl="tpl" navurl="{src}"> <span style="color:red;">{lastName}</span> {firstName} </div> </div> ~~~ 数据结构 ~~~ var navlist = { test1:[{ text: '动态列表1', url: '#' },{ text: '动态列表2', url: '#' },{ text: '动态列表3', url: '#' }], test2:[{ firstName: '三', lastName: '李', src: '#' },{ firstName: '小东', lastName: '王', src: '#' },{ firstName: '相顾', lastName: '宇', src: '#' }] } ~~~ js ~~~ var navlist = rbk.getCmp('navlist'); navlist.doLayout(navlist.test1); navlist = navlist.next('navlist'); navlist.doLayout(navlist.test2); ~~~ 说明：rbk.getCmp('navlist')：得到navlist节点；navlist.doLayout(navlist.test1)：传入数据。若要实现自定义模板，则增加属性 tpl="tpl"即可。 5、可展开/收缩列表动态绑定  html ~~~ <div class="rbk-collalist"></div> <div class="rbk-collalist"> <div class="rbk-collalistitem" tpl="tpl" text="{name}"> <div class="rbk-navlist" tpl="tpl"> <div class="rbk-navlistitem" tpl="tpl" navurl="{src}">{name1} {name1}</div> </div> </div> </div> ~~~ 数据结构 ~~~ var collalist = { test1: [{ text: '动态导航', cldCtype: 'navlist', clsData: [{ text: '普通内科', url: '/index.html' }, { text: '普通外科', url: '/index.html' }] }, { text: '动态列表', cldCtype: 'list', clsData: [{ text: '普通内科' }, { text: '普通外科' }] }], test2: [{ name: '动态模板导航', cldCtype: 'navlist', clsData: [{ name1: '普通内科', src: '/index.html' }, { name1: '普通外科', src: '/index.html' }] }, { name: '动态模板导航2', cldCtype: 'navlist', clsData: [{ name1: '普通内科', src: '/index.html' }, { name1: '普通外科', src: '/index.html' }] }] } ~~~ js ~~~ var content = rbk.getCmp('content'); var collalist = content.down('collalist'); collalist.doLayout(collalist.test1); collalist = collalist.next('collalist'); collalist.doLayout(collalist.test2); ~~~ 说明：基本原理同上，采用了另外一种获取节点的方式。需要注意的是，模板动态绑定，模板下的所有控件都要标记为模板。既tpl="tpl"。