发布时间:2022-08-19 11:28
项目完整效果展示:
在本文中我们要完成的就是底部导航栏 tabBar 的内容
在模板里选择 uni-ui 项目
2. 在 pages 中新建三个页面对应我们要做的底部tabbar:
因为底部有三个选项所以我们要配置三个页面,三个页面都选择 scss 页面
这是对应的 pages 目录:
3. 配置 tabBar 的 pages.json 文件:
先删掉原有的 index 页面的配置,然后在 Pages 同级目录下创建 tabBar,配置方式同微信小程序的配置方式一样。首先我们配置 list,list 对应三个页面,每个页面对应一个内容:
pagePath是页面对应的路径, text 是 tabBar 对应文字,iconPath 是 tabBar 的字体图标路径, selectedIconPath 是选中状态下字体图标的路径
"tabBar": {
"list": [
{
"pagePath": "pages/hot/hot",
"text": "热搜",
"iconPath": "static/tab-icons/hot.png",
"selectedIconPath": "static/tab-icons/hot-active.png"
},
{
"pagePath": "pages/hot-video/hot-video",
"text": "热播",
"iconPath": "static/tab-icons/hot-video.png",
"selectedIconPath": "static/tab-icons/hot-video-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab-icons/my.png",
"selectedIconPath": "static/tab-icons/my-active.png"
},
]
}
当用户点击 tabBar 时,产生对应颜色的变化:
这样我们的 tabBar 就配置完成了。
4. 运行到小程序模拟器中查看效果:
5. 警告与错误处理
我们写完 tabBar 后,小程序工具的控制台会报一堆错误,下面我们就来处理一下:
5.1: 解决 sitemap 索引情况提示的警告问题:
微信小程序默认开启了索引功能,但是因为我们没有配置索引策略,导致出现了这么一个警告的问题,解决这个警告我们只需要关闭默认索引功能即可,双击打开 manifest.json,点击源码试图,添加 checkSiteMap 配置为 false 即可:
5.2:解决 Cannot read property 'forceUpdate' of undefined 的错误:
这个错误源于我们没有为项目配置 appID 的原因,所以只需要在 manifest 中完成 APPID 配置即可
【云原生Kubernetes系列第一篇】深入理解容器集群管理系统Kubernetes(k8s)原理(相遇的意义在于彼此照亮)
逼真度超越「AI设计师」DALL·E 2!谷歌大脑推出新的文本生成图像模型Imagen
C语言从入门到精通——进阶4 自定义类型详解(结构体+枚举+联合)
Spss Modeler关联规则Apriori模型、Carma算法分析超市顾客购买商品数据挖掘实例
高阶JavaScript笔记2(函数,回调函数,IIFE,函数中的this,语句加分号的问题,原型, 显式原型和隐式原型,原型链,原型链的补充,原型链的属性问题,探索instanceof,原型面试题)
【历史上的今天】7 月 15 日:Mozilla 基金会正式成立;Enigma 密码机的首次工作;任天堂推出 FC 游戏机