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

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

PyQt开发实战：利用QToolBox开发的桌面工具箱
老猿Python博文目录专栏:使用PyQt开发图形界面Python应用老猿Python博客地址一.引言 toolBox工具箱是一个容器部件,对应类为QToolBox,在其内有一列从上到下顺序排列 ...
外贸业开发实战-如何利用领英找采购邮箱
问渠哪得清如水,为有源头活水来. 做外贸,最愁的就是要找客户,找客户邮箱,找关键人邮箱.而大部分外贸人止步于info邮箱,就开始犯愁了. 如果我说找客户是件很easy的事,会不会觉得amazing? ...
《python3网络爬虫开发实战》学习笔记：pc与安卓代理证书都安装好但是无法监听——记自己的踩坑路径
设备版本:window:win7旗舰版.python版本:python3.7.0.pycahrm版本:PyCharm Community Edition 2019.3.3 x64. 手机:红米pro. ...
《树莓派开发实战（第2版）》——2.8　利用VNC远程控制树莓派
本节书摘来异步社区<树莓派开发实战(第2版)>一书中的第2章,第2.8节,作者:[英]Simon Monk(蒙克),更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
《树莓派开发实战（第2版）》——2.9　利用RDP远程控制树莓派
本节书摘来自异步社区<树莓派开发实战第2版>一书中的第2章第2.9节作者[英]Simon Monk蒙克韩波译更多章节内容可以访问云栖社区"异步社区"公众号查看. 2. ...
Vue.js学习笔记—shop-bus:实战：利用计算属性、指令等知识开发购物车
参考<Vue,js>实战(梁灏编著) shop-bus:实战:利用计算属性.指令等知识开发购物车 git代码地址 index.html <!DOCTYPE html> < ...
flutter 国际化_Flutter 开发实战资源推荐
开工第一天,来点轻松的资源推荐. 这是一篇实战类资源推荐,其实Flutter的入门资料官方已经做得很好了,如果你是零基础,还是建议先啃一遍官方的教程,然后再看以下实战资源,相信在你看官方课程中涉及到的 ...
Flutter 开发实战资源推荐
这是一篇实战类资源推荐,其实Flutter的入门资料官方已经做得很好了,如果你是零基础,还是建议先啃一遍官方的教程,然后再看以下实战资源,相信在你看官方课程中涉及到的一些疑问,下面的资源会有一些刚好能 ...
微信小程序|开发实战篇之二
开发实战篇之二前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...

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

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

最新文章

热门文章