首页静态页面、配置文件、底部导航栏

最新推荐文章于 2023-04-23 21:57:42 发布

宛Wan

最新推荐文章于 2023-04-23 21:57:42 发布

阅读量382

点赞数

分类专栏：毕业设计制作过程

本文链接：https://blog.youkuaiyun.com/weixin_44051236/article/details/106272908

版权

本文介绍了小程序的配置步骤，包括在app.json中配置页面和底部导航栏。底部导航栏的实现依赖于正确的pagePath设置，图标来自阿里巴巴矢量图标库。首页组件包括搜索栏、图片轮播和章节展示，轮播图使用swiper组件，章节展示的动态化将在后续笔记中探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）配置文件

首先要对整个小程序的页面进行配置，具体写在app.json中，代码如下：

"pages": [
    "pages/index/index",
    "pages/collect/collect",
    "pages/ran/ran",
    "pages/mana/mana",
    "pages/logs/logs"

（2）底部导航栏

在底部导航栏设置之前必须要设置好第一步，也就是pagePath，不然无法实现跳转；小标签的下载来源于阿里巴巴矢量图标库，且每个小图标都下载了黑色与红色两种不同地颜色，以便于操作的时候可以实现点击与不点击两种效果，下载后的图标存放于images中。使用tabBar来进行操作
这属于全局的配置，因此将其写入app.json中：

"tabBar": {
   
    "color": "#272636",
    "selectedColor": "#CD69C9",
    "backgroundColor": "#fff",
    "boderStyle": "black"

最低0.47元/天解锁文章