wxc-tabbar是官方提供的一個(gè)tabbar擴(kuò)展,需要安裝weex-components
npm install weex-components --save注意在安卓項(xiàng)目上,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>最終實(shí)現(xiàn)效果
wxc-tabbar使用過程中會(huì)有一些顯示不全的問題,可以去修改node_modules里面的源碼,調(diào)整高度。
項(xiàng)目源代碼:點(diǎn)擊打開鏈接
有任何問題可以聯(lián)系我 2470828450@QQ.com 交流weex和安卓開發(fā)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注