wxc-tabbar是官方提供的一个tabbar扩展,需要安装weex-components
npm install weex-components --save
注意在安卓项目上,src最好写成 “file://assets/yourpath”
<template>
<div style="flex-direction: column;">
<wxc-tabbar tab-items={{tabItems}}></wxc-tabbar>
</div>
</template>
<script>
require('weex-components');
module.exports = {
data:{
tabItems:[
{
index:0,
title:"主页",
titleColor:'',
icon:"",
image:"http://ww2.sinaimg.cn/large/0060lm7Tgw1fb5paqsppfj302v02gmwx.jpg",
selectedImage:"http://ww3.sinaimg.cn/large/0060lm7Tgw1fb5pacghqhj302v02g744.jpg",
src:"file://assets/weex/modules/main.js",
visibility:"visible"
},
{
index:1,
title:"收藏",
titleColor:'',
icon:"",
image:"http://ww2.sinaimg.cn/large/0060lm7Tgw1fb5oxe9vbkj302s02g0si.jpg",
selectedImage:"http://ww4.sinaimg.cn/large/0060lm7Tgw1fb5ow9ddswj302s02gglh.jpg",
src:"file://assets/weex/modules/collection.js",
visibility:"hidden"
},
{
index:2,
title:"我的",
titleColor:'',
icon:"",
image:"http://ww1.sinaimg.cn/large/0060lm7Tgw1fb5pbtauy1j302c02hmwx.jpg",
selectedImage:"http://ww4.sinaimg.cn/large/0060lm7Tgw1fb5pbb390dj302c02hglg.jpg",
src:"file://assets/weex/modules/me.js",
visibility:"hidden"
}
]
}
}
</script>
<style>
</style>
最终实现效果
wxc-tabbar使用过程中会有一些显示不全的问题,可以去修改node_modules里面的源码,调整高度。
项目源代码:点击打开链接
有任何问题可以联系我 2470828450@qq.com 交流weex和安卓开发。