页签内容使用自定义子组件

为了更好的组织页面代码，提升代码可维护性。开发者可以将页签内容通过自定义子组件来渲染

关于如何开发子组件详见父子组件通信，本小节仅做简单引入使用

示例代码如下：

  1. <import name="tab-content-item" src="./tabitem"></import>
  2. <template>
  3.   <!-- tabs组件 -->
  4.   <div class="tutorial-page">
  5.     <tabs onchange="onChangeTabIndex">
  6.       <tab-bar class="tab-bar">
  7.         <text>menu1</text>
  8.         <text>menu2</text>
  9.         <text>menu3</text>
  10.       </tab-bar>
  11.       <tab-content class="tab-content">
  12.         <tab-content-item index="0" itemdata="{{list[0]}}" current-index="{{currentIndex}}"></tab-content-item>
  13.         <tab-content-item index="1" itemdata="{{list[1]}}" current-index="{{currentIndex}}"></tab-content-item>
  14.         <tab-content-item index="2" itemdata="{{list[2]}}" current-index="{{currentIndex}}"></tab-content-item>
  15.       </tab-content>
  16.     </tabs>
  17.   </div>
  18. </template>
  20. <style>
  21.   .tutorial-page {
  22.     flex: 1;
  23.     flex-direction: column;
  24.   }
  25.   .tab-bar {
  26.     height: 100px;
  27.     border: 0px solid #eeeeee;
  28.     border-bottom-width: 1px;
  29.   }
  30.   .tab-bar text {
  31.     flex-grow: 1;
  32.     text-align: center;
  33.     margin: 10px;
  34.   }
  35.   .tab-content {
  36.     flex: 1;
  37.     background-color: #eeeeee;
  38.   }
  39. </style>
  41. <script>
  42.   export default {
  43.     private: {
  44.       list: [
  45.         {title: 'content1'},
  46.         {title: 'content2'},
  47.         {title: 'content3'}
  48.       ],
  49.       currentIndex: 0
  50.     },
  51.     onInit () {
  52.       this.$page.setTitleBar({ text: '页签内容使用自定义子组件' })
  53.     },
  54.     onChangeTabIndex (evt) {
  55.       this.currentIndex = evt.index
  56.     }
  57.   }
  58. </script>

在tabitem.ux文件中：

<template>
  <div class="tab-section">
    <text>{{itemdata.title}}</text>
  </div>
</template>

<style>
  .tab-section {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    background-color: #ffffff;
    margin: 10px;
  }
  .tab-section text {
    color: #FF0000;
    text-align: center;
  }
</style>

<script>
  export default {
    props: [
      'index',
      'itemdata',
      // 驼峰式在赋值时使用-连接
      'currentIndex'
    ],
    onInit () {
      // 监听属性变化
      this.$watch('currentIndex', 'watchCurrentIndex')
    },
    /**
     * 监听用户选择的索引，选中当前时触发业务逻辑
     * @param newValue
     * @param oldValue
     */
    watchCurrentIndex (newValue, oldValue) {
      if (parseInt(this.index) === this.currentIndex) {
        console.info(`当前用户选择了这个标签：${this.index}, ${newValue}, ${oldValue}`)
      }
    }
  }
</script>