tab
实例
---
```javascript
var tab = new phoenix.tab({
tabList: page.querySelector('.newsTab'),
items: [{
name: '热点资讯',
cache: true,
params: '3'
}],
tabContent: page.querySelector('.newsTabContent'),
isScroll: false,
already: function() {
},
onChange: function(activeIndex, item, content) {
}
});
tab.set(0);
```
```html
<header class="header header_back flex">
<div class="flex2"></div>
<div class="flex6 ac">资讯</div>
<div class="flex2"></div>
</header>
<div class="content relative">
<div class="newsTab absolute top0 left0 w100 box lh48"></div>
<div class="newsTabContent w100 h100 relative" style="margin-top:48px;"></div>
</div>
```
---
多例
```js
var contents;
var tab = new phoenix.tab({
tabList: tab,
items: tabArray,
tabContent: tabContent,
isScroll: false,
isSingle: false,
already: function () {
contents = page.querySelectorAll(".touch_wrapper");
phoenix.pageTouch.myCollect = new phoenix.touch({
URL: phoenix.config.apiUrl + 'user_collect_goods',
touch: contents[0],
creatHTML: function (data, page) {
return creatHTML(data);
},
});
phoenix.pageTouch.myCollect2 = new phoenix.touch({
URL: phoenix.config.apiUrl + 'user_collect_knowledge',
touch: contents[1],
creatHTML: function (data, page) {
return creatHTML2(data);
},
});
},
onChange: function (activeIndex, item, content) {
if(activeIndex == 0){
phoenix.pageTouch.myCollect.loadFirstPage();
} else if(activeIndex == 1){
phoenix.pageTouch.myCollect2.loadFirstPage();
}
}
});
tab.set(0);
```
参数
---
|属性|类型|默认值|说明|
|-|-|-|-|-|
|tabList <span style="color:#f00">*</span>|DOM|-|项目列表生成的位置|
|items <span style="color:#f00">*</span>|array|-|项目数据源，至少一个项目，五个以内均分布局，超过五个左右滚动<br>格式形如：[{name:'热点资讯', cache:true, params:'3'}]<br>name：项目名称，字符串<br>cache：是否缓存，布尔型<br>params：参数，字符串格式|
|tabContent <span style="color:#f00">*</span>|DOM|-|内容框生成位置|
|isScroll|boolean|false|项目列表是否可水平滚动<br>false为均分<br>true为可水平拖动|
|isSingle|boolean|true|是否单例<br>单例：只有一个内容展示框<br>多例：则按照项目生成对应内容展示框
|activeColor|string|#ff3824|选中的项目文本颜色|
|activeLineBg|string|#ff3824|横线背景色|
|activeLineWidth|string|40px|横线宽度|
|activeLineHeight|string|2px|横线高度|
|already|function|-|插件就绪后的回调，无参<br>多用于内容展示区的插件初始化，如滚动插件初始化|
|onChange|function|-|选中后的回调，参数如下<br>activeIndex：选中的序列号，数字<br>item：选中的items值，对象格式<br>content：选中的项目内容展示区，DOM元素|
方法
---
|方法名|参数|说明|
|-|-|-|-|
|set|number|初始化后用于设置选中的序列，0为第一个项目<br>例：tab.set(0)||