lighting-ui/packages/lc-tab-page/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-tab-page 

> Weex tab 页面滑动切换组件

### 规则
- 支持图文和纯文字，支持滚动
- 允许对头部进行配置，支持 ExpressionBinding 手势跟随效果，H5 支持降级效果滑动切换
- 常用于 Tab 切换页面，目前支持**icon 和文字**形式的顶栏,详细可见[config.js](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)
- **Android 由于[此约束](http://weex-project.io/cn/references/gesture.html#约束)，需在子元素上绑定对应事件，可通过`lc-pan-item`解决此问题**
- 支持**居中形式 Tab**，将 tabStyles 中的 leftOffset/rightOffset 配置合适的值即可
 

## [Demo](https://h5.m.taobao.com/trip/lc-tab-page/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-tab-page%2Fdemo%2Findex.native-min.js)
<img src="https://gw.alipayobjects.com/zos/rmsportal/drLGhWpwwSbMTjMCWomE.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1M7ywSpXXXXXuXXXXXXXXXXXX-200-200.png" width="160"/>

## 使用方法

```vue
<template>
  <title title="wxc-tab-page"></title>
      <category title="纯文字可滚动"></category>
      <div class="demo">
        <wxc-tab-page 
          ref="wxc-tab-page"
          :tab-titles="tabTitles"
          :tab-styles="tabStyles"
          title-type="icon"
          :needSlider="needSlider"
          :is-tab-view="isTabView"
          :tab-page-height="tabPageHeight"
          :spm-c="4307989"
          @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
          <list v-for="(v,index) in tabList"
            :key="index"
            class="item-container">
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in v"
              class="cell"
              :key="key"
              :accessible="true"
              aria-label="招商公路华能水电何以成为资金“新宠”">
              <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                @wxcPanItemPan="wxcPanItemPan">
                <wxc-item image="http://img5.imgtn.bdimg.com/it/u=2306629954,650632153&fm=27&gp=0.jpg"
                  :image-text="tabTitles[index].title"
                  title="2018港股投资：不仅看“大而美”，中小市值公司“颜值”也不低"
                  :desc="desc"
                  :tags="tags"
                  price-desc="每日经济新闻 12-29 08:23">
                </wxc-item>
              </wxc-pan-item>
            </cell>
          </list>
        </wxc-tab-page>
      </div>

      <category title="图文可滚动"></category>
      <div class="demo">
        <wxc-tab-page ref="wxc-tab-page"
          :tab-titles="tabTitles1"
          :tab-styles="tabStyles1"
          title-type="icon"
          :needSlider="needSlider"
          :is-tab-view="isTabView"
          :tab-page-height="tabPageHeight"
          :spm-c="4307989"
          @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected1">
          <list v-for="(v,index) in tabList1"
            :key="index"
            class="item-container">
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in v"
              class="cell"
              :key="key"
              :accessible="true"
              aria-label="招商公路华能水电何以成为资金“新宠”">
              <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                @wxcPanItemPan="wxcPanItemPan">
                <wxc-item image="http://img5.imgtn.bdimg.com/it/u=2306629954,650632153&fm=27&gp=0.jpg"
                  :image-text="tabTitles1[index].title"
                  title="2018港股投资：不仅看“大而美”，中小市值公司“颜值”也不低"
                  :desc="desc"
                  :tags="tags"
                  price-desc="每日经济新闻 12-29 08:23">
                </wxc-item>
              </wxc-pan-item>
            </cell>
          </list>
        </wxc-tab-page>
      </div>

      <category title="纯文字不可滚动-普通"></category>
      <div class="demo">
        <wxc-tab-page type="normal"
          ref="wxc-tab-page"
          :tab-titles="tabTitles2"
          title-type="text"
          :tab-page-height="tabPageHeight"
          :spm-c="4307989"
          @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected2">
          <list v-for="(v,index) in tabList2"
            :key="index"
            class="item-container">
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in v"
              class="cell"
              :key="key"
              :accessible="true"
              aria-label="招商公路华能水电何以成为资金“新宠”">
              <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                @wxcPanItemPan="wxcPanItemPan">
                <wxc-item image="http://img5.imgtn.bdimg.com/it/u=2306629954,650632153&fm=27&gp=0.jpg"
                  :image-text="tabTitles2[index].title"
                  title="2018港股投资：不仅看“大而美”，中小市值公司“颜值”也不低"
                  :desc="desc"
                  :tags="tags"
                  price-desc="每日经济新闻 12-29 08:23">
                </wxc-item>
              </wxc-pan-item>
            </cell>
          </list>
        </wxc-tab-page>
      </div>

      <category title="纯文字不可滚动-卡片"></category>
      <div class="demo">
        <wxc-tab-page type="card"
          ref="wxc-tab-page"
          :tab-titles="tabTitles2"
          title-type="text"
          :tab-page-height="tabPageHeight"
          :spm-c="4307989"
          @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected2">
          <list v-for="(v,index) in tabList2"
            :key="index"
            class="item-container">
            <cell class="border-cell"></cell>
            <cell v-for="(demo,key) in v"
              class="cell"
              :key="key"
              :accessible="true"
              aria-label="招商公路华能水电何以成为资金“新宠”">
              <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                @wxcPanItemPan="wxcPanItemPan">
                <wxc-item image="http://img5.imgtn.bdimg.com/it/u=2306629954,650632153&fm=27&gp=0.jpg"
                  :image-text="tabTitles2[index].title"
                  title="2018港股投资：不仅看“大而美”，中小市值公司“颜值”也不低"
                  :desc="desc"
                  :tags="tags"
                  price-desc="每日经济新闻 12-29 08:23">
                </wxc-item>
              </wxc-pan-item>
            </cell>
          </list>
        </wxc-tab-page>
      </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F9F9F9;
  }
  .scroller {
    flex: 1;
  }
  .demo {
    width: 750px;
    height: 380px;
    align-items: flex-start;
  }
  .item-container {
    width: 750px;
    background-color: #F9F9F9;
  }
  div.weex-div.weex-ct.price-num {
    display: none;
  }
  .border-cell {
    background-color: #F9F9F9;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
  }
  .cell {
    background-color: #ffffff;
    border-top-width: 1px;
    border-style: solid;
    border-color: #D7D7D7;
    border-bottom-width: 1px;
  }
</style>

<script>
  const dom = weex.requireModule('dom');
  import { LcTabPage, LcPanItem, Utils } from 'weex-ui';

  import Config from './config'
  import { setTitle } from '../_mods/set-nav';

  export default {
    components: { LcTabPage, LcPanItem, WxcItem },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabTitles1: Config.tabTitles1,
      tabTitles2: Config.tabTitles2,
      tabTitles3: Config.tabTitles3,
      tabStyles: Config.tabStyles,
      tabStyles1: Config.tabStyles1,
      tabStyles2: Config.tabStyles2,
      tabStyles3: Config.tabStyles3,
      tabList: [],
      tabList1: [],
      tabList2: [],
      tabList3: [],
      needSlider: true,
      demoList: [1],
      supportSlide: true,
      isTabView: true,
      tabPageHeight: 380,
      desc: [{
        type: 'text',
        value: '',
        theme: 'gray'
      }],
      tags: [{
        type: 'tag',
        value: '国企金融版',
        theme: 'red'
      }]
    }),
    created () {
      setTitle('TabPage');
      // this.tabPageHeight = Utils.env.getPageHeight();
      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
      Vue.set(this.tabList, 0, this.demoList);
      this.tabList1 = [...Array(this.tabTitles1.length).keys()].map(i => []);
      Vue.set(this.tabList1, 0, this.demoList);
      this.tabList2 = [...Array(this.tabTitles2.length).keys()].map(i => []);
      Vue.set(this.tabList2, 0, this.demoList);
      this.tabList3 = [...Array(this.tabTitles3.length).keys()].map(i => []);
      Vue.set(this.tabList3, 0, this.demoList);
    },
    methods: {
      LcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self.tabList[index])) {
          setTimeout(() => {
            Vue.set(self.tabList, index, self.demoList);
          }, 100);
        }
      },
      LcTabPageCurrentTabSelected1 (e) {
        const self1 = this;
        const index1 = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self1.tabList1[index1])) {
          setTimeout(() => {
            Vue.set(self1.tabList1, index1, self1.demoList);
          }, 100);
        }
      },
      LcTabPageCurrentTabSelected2 (e) {
        const self2 = this;
        const index2 = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self2.tabList2[index2])) {
          setTimeout(() => {
            Vue.set(self2.tabList2, index2, self2.demoList);
          }, 100);
        }
      },
      wxcTabPageCurrentTabSelected3 (e) {
        const self3 = this;
        const index3 = e.page;
        /* 未加载tab模拟数据请求 */
        if (!Utils.isNonEmptyArray(self3.tabList3[index3])) {
          setTimeout(() => {
            Vue.set(self3.tabList3, index3, self3.demoList);
          }, 100);
        }
      },

      wxcPanItemPan (e) {
        if (Utils.env.supportsEBForAndroid()) {
          this.$refs['lc-tab-page'].bindExp(e.element);
        }
      }
    }
  };
</script>

```
更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/index.vue)


### 可配置参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| type | `String` |`N`| `scroll` | 顶部类型 `scroll` / `normal` / `card` |
| tab-titles | `Array` |`Y`| `[]` | 顶部 [显示配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js#L7)|
| title-type | `String` |`N`| `icon` | 顶部类型 `icon`/`text`|
| tab-styles | `Array` |`N`| `[]` | 顶部 [样式配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
| tab-styles-normal | `Array` |`N`| `[]` | 顶部(纯文字不可滚动-普通) [样式配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
| tab-styles-card | `Array` |`N`| `[]` | 顶部(纯文字不可滚动-卡片)  [样式配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
| tab-page-height | `Number` |`N`| `1334` | Tab page 页面的高度 |
| is-tab-view | `Boolean` |`N`| `true` |当设置为`false`，同时 tab 配置 url 参数即可跳出|
| need-slider | `Boolean` |`N`| `true` | 是否需要滑动功能|
| pan-dist | `Number` |`N`| `200` | 滚动多少切换上下一屏幕|
| duration | `Number` |`N`| `300` | 页面切换动画的时间 |
| timing-function | `String` |`N`| `-` | 页面切换动画函数 |
| title-use-slot | `Boolean` |`N`| `false` | 使用 slot 配置头部导航 (注1)|
| wrap-bg-color | `String` |`N`| `#F2F3F4` |页面背景颜色|


### 注1：自定义头部导航块(type为scroll时)
- 当使用slot的方式配置头部导航的时候，需要确保原有简单配置已经不能满足现有需求情况下再使用，可以传入参数`:title-use-slot="true"`,同时在wxc-tab-page组件内部传入如下slot对应节点即可
- 可以通过遍历到方式来生成，同时根据wxcTabPageCurrentTabSelected来确定当前的选择页，自己管理颜色即可。
 ```
<div slot="tab-title-0"><text>111</text></div>
<div slot="tab-title-1"><text>222</text></div>
<div slot="tab-title-2"><text>333</text></div>
```

### 主动触发设置页面(type为scroll时)

```
// 直接在lc-tab-page上面绑定ref="lc-tab-page",然后调用即可
this.$refs['lc-tab-page'].setPage(2)

// 如果想设置无动画跳转，可以这样使用(中间参数用于设置url，设置null即可)
this.$refs['lc-tab-page'].setPage(2,null,false);
```

### 事件回调

```
@LcTabPageCurrentTabSelected="LcTabPageCurrentTabSelected"
```



## lc-pan-item 的使用(type为scroll时)

#### 参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| ext-id | `Number、String` |`Y`| `0` | 滑动元素的id索引|
| url | `String` |`N`| `-` | url跳转链接，自己处理可以不传|

#### 使用
```
// 组件使用
<lc-pan-item 
    :ext-id="1" 
    :url="url" 
    @LcPanItemClicked="LcPanItemClicked"
    @LcPanItemPan="LcPanItemPan">
      <your-item>....</your-item>
    </pan-item>
  
// 引用
import { LcPanItem } from 'weex-ui';

//回调
LcPanItemPan (e) {
    if (Utils.env.supportsEBForAndroid()) {
      this.$refs['lc-tab-page'].bindExp(e.element);
    }
 }
```