手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

微信小程序基础:底部导航

时间:2024-10-14 22:45:42

1、新建一个微信小程序0607,完成后,大致架构如图:

微信小程序基础:底部导航

2、打开app.json,在其中配置topbar,如图,红色部分表示的代码;注意:绿色处的逗号,不可省略。

微信小程序基础:底部导航

3、上图代码运行后,即可看到添加的底部导航,如图:

微信小程序基础:底部导航

4、在app.json中,再添加一个导航test,需要添加两端代码,如图中的代码1和代艨位雅剖码2,运行成功后,会在pages文件夹下出现test文件,如图:注意:如果仅添加代码2,则会出现错误1

微信小程序基础:底部导航

5、给添加图标,要使用 iconPath,selecte蟠校盯昂dIconPath这两个属性。1、新建目录images,右击选择“硬盘打开”,将准备好的4张图片放到images文件夹中2、在list项目组中添加如图所示的代码

微信小程序基础:底部导航
微信小程序基础:底部导航

6、运行后,出现底部导航图标,点击选中的显示√,如图:

微信小程序基础:底部导航

7、如果要改变文字的颜色,或者背景,则要添加以下代码,如图:

微信小程序基础:底部导航
微信小程序基础:底部导航

8、如果不喜欢导航放在下面,可以改变position的值,将其放在最上端,如图:

微信小程序基础:底部导航
微信小程序基础:底部导航
© 手抄报圈