页签内容懒加载

一个内容丰富的选项卡，通常会包含许多页签内容。如新闻类应用中，可能会包括：推荐、热点、视频、段子、汽车、社会、娱乐等

直接使用tabs默认会加载所有页签内容，导致 JS 线程持续忙于渲染每个页签，无法响应用户点击事件等，造成体验困扰

为了解决这类问题，开发者可以让页签内容在用户点击时延迟渲染（而不是整个页面初始化时渲染），这项功能可以通过if指令完成

示例代码如下：

  1. <template>
  2.   <div class="tutorial-page">
  3.     <tabs onchange="onChangeTabIndex">
  4.       <tab-bar class="tab-bar" mode="scrollable">
  5.         <text for="{{tabHeadList}}" class="{{currentIndex === $idx ? 'active' : ''}}">{{$item.title}}</text>
  6.       </tab-bar>
  7.       <tab-content class="tab-content">
  8.         <div class="tab-content-section" for="{{tabHeadList}}">
  9.           <!-- 初始化时，if为false，默认不渲染；页签被首次点击时，对应页签内容的if由false改为true -->
  10.           <text if="{{$item.render}}">{{$item.title}}</text>
  11.         </div>
  12.       </tab-content>
  13.     </tabs>
  14.   </div>
  15. </template>
  17. <style lang="less">
  18.   .tutorial-page {
  19.     flex-direction: column;
  20.     justify-content: center;
  21.     align-items: center;
  22.     .tab-bar text{
  23.       padding: 0 25px;
  24.       text-align: center;
  25.       font-size: 34px;
  26.     }
  27.     .tab-bar .active {
  28.       color: #FF0000;
  29.     }
  30.     .tab-content {
  31.       flex: 1;
  32.       background-color: #eeeeee;
  33.       .tab-content-section {
  34.         flex: 1;
  35.         margin: 10px;
  36.         background-color: #ffffff;
  37.         justify-content: center;
  38.         text {
  39.           text-align: center;
  40.           color: #FF0000;
  41.         }
  42.       }
  43.     }
  44.   }
  45. </style>
  47. <script>
  48.   export default {
  49.     private: {
  50.       tabHeadList: [
  51.         { title: '推荐', render: false },
  52.         { title: '热门', render: false },
  53.         { title: '视频', render: false },
  54.         { title: '段子', render: false },
  55.         { title: '汽车', render: false },
  56.         { title: '社会', render: false },
  57.         { title: '娱乐', render: false },
  58.         { title: '军事', render: false },
  59.         { title: '体育', render: false },
  60.         { title: '财经', render: false }
  61.       ],
  62.       currentIndex: 0
  63.     },
  64.     onInit () {
  65.       this.$page.setTitleBar({ text: '页签内容懒加载' })
  66.     },
  67.     /**
  68.      * 修改列表中对应索引的数据项
  69.      * @param index
  70.      */
  71.     modifyListItemData (index) {
  72.       this.tabHeadList[index].render = true
  73.     },
  74.     /**
  75.      * 监听tabs组件index的改变，index默认为0
  76.      * @param evt
  77.      */
  78.     onChangeTabIndex (evt) {
  79.       this.currentIndex = evt.index
  80.       this.modifyListItemData(evt.index)
  81.     }
  82.   }
  83. </script>