wxc-tab-page

Weex tab 页面滑动切换组件

随手滑动的效果依赖于 BindingX 特性，使用前请确定你的App 是否安装。 0.6.1 版本新增 沉浸式全屏的 FullPage 效果的 tabPage，详细可见下面文档。

规则

• 允许对头部进行配置，支持 Binding 手势跟随效果
• 常用于 Tab 切换页面，目前支持icon、text、iconFont 形式的顶栏,详细可见config.js
• Android 由于点击事件和滑动手势冲突约束，需在子元素上绑定对应事件，可通过wxc-pan-item解决此问题，同时记得在wxcPanItemPan回调中处理 Android 事件
• 支持居中形式 Tab ，将 tabStyles 中的 leftOffset 配置合适的值即可

Demo

;

使用方法

  1. <template>
    2.   <wxc-tab-page ref="wxc-tab-page"
    3.                 :tab-titles="tabTitles"
    4.                 :tab-styles="tabStyles"
    5.                 title-type="icon"
    6.                 :tab-page-height="tabPageHeight"
    7.                 @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    8.     <list v-for="(v,index) in tabList"
    9.           :key="index"
    10.           class="item-container"
    11.           :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
    12.       <cell class="border-cell"></cell>
    13.       <cell v-for="(demo,key) in v"
    14.             class="cell"
    15.             :key="key">
    16.         <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
    17.                       url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
    18.                       @wxcPanItemPan="wxcPanItemPan">
    19.          <div class="content">
    20.             <text>{{key}}</text>
    21.          </div>
    22.         </wxc-pan-item>
    23.       </cell>
    24.     </list>
    25.   </wxc-tab-page>
    26. </template>
    27.   28. <style scoped>
    29.   .item-container {
    30.     width: 750px;
    31.     background-color: #f2f3f4;
    32.   }
    33.   34.   .border-cell {
    35.     background-color: #f2f3f4;
    36.     width: 750px;
    37.     height: 24px;
    38.     align-items: center;
    39.     justify-content: center;
    40.     border-bottom-width: 1px;
    41.     border-style: solid;
    42.     border-color: #e0e0e0;
    43.   }
    44.   45.   .cell {
    46.     background-color: #ffffff;
    47.   }
    48.   49.   .content{
    50.     width:750px;
    51.     height:300px;
    52.     border-bottom-width:1px;
    53.     align-items: center;
    54.     justify-content: center;
    55.   }
    56. </style>
    57. <script>
    58.   const dom = weex.requireModule('dom');
    59.   import { WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui';
    60.   61.   // https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js
    62.   import Config from './config'
    63.   64.   export default {
    65.     components: { WxcTabPage, WxcPanItem },
    66.     data: () => ({
    67.       tabTitles: Config.tabTitles,
    68.       tabStyles: Config.tabStyles,
    69.       tabList: [],
    70.       demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    71.       tabPageHeight: 1334
    72.     }),
    73.     created () {
    74.       this.tabPageHeight = Utils.env.getPageHeight();
    75.       this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
    76.       Vue.set(this.tabList, 0, this.demoList);
    77.     },
    78.     methods: {
    79.       wxcTabPageCurrentTabSelected (e) {
    80.         const self = this;
    81.         const index = e.page;
    82.         /* Unloaded tab analog data request */
    83.         if (!Utils.isNonEmptyArray(self.tabList[index])) {
    84.           setTimeout(() => {
    85.             Vue.set(self.tabList, index, self.demoList);
    86.           }, 100);
    87.         }
    88.       },
    89.       wxcPanItemPan (e) {
    90.         if (BindEnv.supportsEBForAndroid()) {
    91.           this.$refs['wxc-tab-page'].bindExp(e.element);
    92.         }
    93.       }
    94.     }
    95.   };
    96. </script>Click to copy

更详细代码可以参考 demo

可配置参数

注1：自定义头部导航块

• 当使用slot的方式配置头部导航的时候，需要确保原有简单配置已经不能满足现有需求情况下再使用，可以传入参数:title-use-slot="true",同时在wxc-tab-page组件内部传入如下slot对应节点即可
• 可以通过遍历到方式来生成，同时根据wxcTabPageCurrentTabSelected来确定当前的选择页，自己管理颜色即可。

111

222

333 Click to copy

主动触发设置页面

  1. // 直接在wxc-tab-page上面绑定ref="wxc-tab-page",然后调用即可
    2. this.$refs['wxc-tab-page'].setPage(2)
    3.   4. // 如果想设置无动画跳转，可以这样使用(中间参数用于设置url，设置null即可)
    5. this.$refs['wxc-tab-page'].setPage(2,null,false);Click to copy

事件回调

  1. @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected"Click to copy

沉浸式全屏的 FullPage 的使用

• 引入：import { WxcFullPage} from 'weex-ui';
• 参数形式和 wxcTabPage 保持一致，详细可见 【demo】
• 建议隐藏头部导航栏使用，同时可以结合 wxc-slide-nav 使用

wxc-pan-item 的使用

在 weex-ui V0.6.0 版本以上，为了减少打包体积，Binding 相关判断由 Utils.env 转移到 BindEnv

参数

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/