2回答

好帮手慕慕子

2021-03-15

同学你好，对于你的问题解答如下：

1、老师提醒同学需要注意的是在custom-tab-bar文件夹下的index.js中tabbar配置，在pagePath属性值的pages前添加/，而不是在app.json文件中哦，如下图所示：

如果同学的在custom-tab-bar文件夹下的index.js中tabbar配置中pagePath属性值的pages前不添加/，也可以正确跳转的话，那么就可以不添加。

2、看截图是因为文件名书写有误，所以无法显示，应该是custom-tab-bar，可以修改后再测试下。如下图所示：

祝学习愉快~

0

好帮手慕慕子

2021-03-15

同学你好，可以参考小程序官网中设置自定义tabBar的步骤操作，具体可以参考如下：

1、在app.json文件中配置tabbar相关的信息，并添加custom属性，使用自定义的tabbar

2、在项目的根目录下添加tabbar代码文件，如下：

该文件夹必须以custom-tab-bar命名。示例：

3、编写tabbar相关的代码

可以参考官网给出的示例代码，直接将示例中的js、wxml和wxss代码复制粘贴到自己的项目中，如下：

由于tabbar没有上边框，可以将复制后的wxml中如下代码注释掉。示例：

然后，给tabbar设置阴影，并去掉设置上边框样式的css代码。示例：

这样就成功给tabbar设置了阴影效果。调整后的效果如下图所示：

最后，调整自己项目custom-tab-bar文件夹下的index.js中的tabbar配置，这里有一个注意点，就是设置pagePath属性值时，需要在pages前面添加/，才能正确跳转页面

配置完成之后，在对应页面的onShow声明周期函数中，添加一段代码，以首页为例，索引值为0 ，那么就将selected属性值设置为0 。示例：

其他页面也是同样的思路，设置对应的索引值即可，这里就直接给同学截取示例代码图

效果如下：

祝学习愉快~

0

heepulse

hp>

为什么不显示出来？

h021-03-15

共2条回复