仿礼物说小程序项目实战——4.首页（1）

仿礼物说小程序项目实战——4.首页（1）
首先来看一下我们的界面效果图，然后我们根据设计稿来写我们的小程序页面
当然了会用到一部分图片素材，我们在项目根目录新建一个images文件夹用于存放我们的图片资源。
图片资源点击下载
接下来我们开始正是我们的代码之旅
先看下我们的app.json配置，整个项目的颜色风格主题为红色，底部有四个tabbar，分别是首页，抽奖，客服，礼物记录。
配置文件如下
然后点击上面的编译按钮，在pages目录下会自动生成配置中的四个页面的目录和文件
我们定义了pages,是页面路径数组，在pages定义的会在编译的时候自动生成相应的页面文件
window：定义小程序所有页面的顶部背景颜色，文字颜色定义等
tabBar：底部切换tab导航栏 selectedColor属性是当前tab页面选中状态高亮的颜色

list是一个数组，配置每一个tab的文件和图片，selectedIconPath为选中时的图片icon路径

app.json代码如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/daily/daily",
    "pages/my/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步生活",
    "navigationBarTextStyle": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#e50e38"
  },
  "tabBar": {
    "selectedColor": "#CE6376",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon1.png",
        "selectedIconPath": "images/icon1-active.png"
      },
      {
        "pagePath": "pages/daily/daily",
        "text":"抽奖",
        "iconPath": "images/icon2.png",
        "selectedIconPath": "images/icon2-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "客服",
        "iconPath": "images/icon3.png",
        "selectedIconPath": "images/icon3-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "礼物记录",
        "iconPath": "images/icon4.png",
        "selectedIconPath": "images/icon4-active.png"
      }
    ]
  }
}

仿礼物说小程序项目实战——4.首页（1）
现在的页面就是这样的，我们点击底部的tab就会跳转到相应的页面，选中状态也会随着切换。

仿礼物说小程序项目实战——4.首页（1）

相关推荐