宝哥软件园

微信小程序实现了topBar底部选择栏的效果

编辑:宝哥软件园 来源:互联网 时间:2021-08-31

本文的例子分享了微信小程序实现topBar底部选择栏的具体代码,供大家参考。具体内容如下

先看效果:底部分为三页,点击不同选项会跳转到对应的页面。

这是文件夹的结构

这分为三个页面,即索引、杜佳和信息

以下是代码:

app.json

{'pages': [//有几个页面,有几个' pages/dujia/dujia ',' pages/index/index ',' pages/info/info']绑定到页面。Window' : { '背景文字样式' : '深色',' navigationbarbackgroundcolor ' : ' # df 3031 ',' navigationbar标题文字' :' topbar练习',' navigationBarTextStyle': '白色' },' tabBar ' : ' { ' color ' : ' # 000000 ',' selectedColor': '#DF3031 ',List ' :{ ' page path ' : ' pages/dujia/dujia ',' text' :' page 2 ',' iconpath' :' images/2.png ',' selectedicon path ' 3360 ' images/2 . png ' },{ ' page path ' : ' pages/info/info ',' text ' : ' page 3 ',' icon path ' 3: ' images/3 . jpg ',' selectedicon path ' 3360 ' images/3 . jpg 'wxml文件就像我们网页设计中的html。

例如,我的索引页:

/view/over的第一页是本文的全部内容。希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+