何大小成

weex · tab组件 · 懒加载

个人感受：在参与weex开发的时候，也发现好多人其实不是对vue的用法不是很透彻。
很多人都是拿来主义者，很多都是贴组件库官网的代码，然后有什么问题就不知道怎么解决了。

就比如，weex-ui的底部 tab-bar 组件。

官网的代码大约是这样的结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<wxc-tab-bar :tab-titles="tabTitles"
              :tab-styles="tabStyles"
              title-type="icon"
              @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
   <!-- 第一个页面内容-->
   <div class="item-container" :style="contentStyle"><text>首页</text></div>

   <!-- 第二个页面内容-->
   <div class="item-container" :style="contentStyle"><text>特别推荐</text></div>

   <!-- 第三个页面内容-->
   <div class="item-container" :style="contentStyle"><text>消息中心</text></div>

   <!-- 第四个页面内容-->
   <div class="item-container" :style="contentStyle"><text>我的主页</text></div>
 </wxc-tab-bar>

那就很多人就往里面塞内容了。好了，有人就有问题了：我的四个子页面的接口同时在请求啊，怎么办啊？

那么有人就回答吧： 用if吧，根据index === page显示哪个页面

其实，有个很简单的办法：动态加载组件

这其实是vue的特性

通过使用保留的 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

至少这样代码简单很多啊～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<style lang="css" scoped>
.item-container {
    width: 750px;
}
</style>
<template>
<div class="cs-home">
  <div class="item-container" :style="contentStyle">
    <component :is="currentComp"></component>
  </div>
  <wxc-tab-bar :tab-titles="tabTitles" :tab-styles="tabStyles" ref="tab" timing-function="ease" :duration="0" title-type="iconFont" @wxcTabBarCurrentTabSelected="handleTabSelected">
  </wxc-tab-bar>
</div>
</template>

<script>
import {
  WxcTabBar,
  Utils
} from 'weex-ui'
const components = {
  0: 'PageDriver',
  1: 'PageMess'
}
import Config from './modules/config'
import PageDriver from 'Pages/driver/onlineList'
import PageOrder from 'Pages/order/record'
export default {
  components: {
    WxcTabBar,
    PageDriver,
    PageOrder
  },
  data: () => ({
    tabTitles: Config.tabIconFontTitles,
    tabStyles: Config.tabIconFontStyles,
    contentStyle: {},
    currentComp: 'PageOrder',
    index: 0
  }),
  created() {
    // 每个tab页内容区的高度
    const tabPageHeight = Utils.env.getPageHeight()
    const {
      tabStyles
    } = this
    this.contentStyle = {
      height: `${tabPageHeight - tabStyles.height}px`
    }
  },
  methods: {
    handleTabSelected(e) {
      this.currentComp = components[e.page]
    }
  }
};
</script>