样式方面没什么好说的，考虑到有些标题是没有跳转更多的，需要做一下判断为空的情况。

在此注意几个问题：
1.注意在weex中文字需要使用text标签，考虑到后续可能会移植为web或者小程序，
text标签最好用class来控制样式；
2.weex默认支持flex布局，考虑到后续可能会移植为web或者小程序，在需要
用到flex布局的地方写上display:flex属性。

菜单组件my-nav.vue的封装

//componet/my-nav.vue
<template>
  <div class="nav">
    <div class="nav-item" @click="goto(item.url)" v-for="(item,index) in navList" :key="index">
      <image class="nav-icon" :style="{'width':width,'height':height}" :src="item.src" />
      <text class="nav-text">{{item.text}}</text>
    </div>
  </div>
</template>

样式方面没什么说的，考虑到会跳转不同的页面，注意在跳转方法里做判断即可。

列表组件news-item.vue的封装

//componet/news-item.vue
<template>
  <div v-if="type==1">
    <div class="item-box" @click="click">
      <div class="item-left">
        <text class="left-text">{{item.title}}</text>
        <div class="left-line"></div>
        <text class="left-time">{{item.pubdate}}</text>
      </div>
      <div class="item-right">
        <image :src="item.pic.src" mode="aspectFill" class="litpic" />
      </div>
    </div>
  </div>
  <div class="item-box2" v-else-if="type==2"  @click="click">
    <image :src="item.pic.src" mode="aspectFill" class="litpic2" />
    <text class="box2-text">{{item.title}}</text>
  </div>
</template>

可以看到我标记4的地方有两处，在组件里加一个type作为判断即可，列表点击事件通过this.$emit传递到父组件调用。至此首页四个公共组件封装完毕，下面开始编写首页代码。

首页编写