weex开发实战(5)--利用wxc-tabbar实现类似安卓fragment分页效果

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和安卓开发。