[toc]

功能开发,需求先行

本次实现目标是tabBar的实现,点击并切换对应页。
image.png

1、全局样式统一

@import "/styles/iconfont.wxss";

page,view,text,swiper,swiper-item,image,navigator{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

page{
/* 主题颜色 */
  --themeColor:#eb4450;

  /* 统一字体大小 */
  font-size: 28rpx;
}

2、实现tabBar功能

tabBar实现解读,请详看 http://liudongdong.top/archives/5-xiao-cheng-xu-appjson

app.json

{

  "pages":[
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",    
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/icons/home.png",
      "selectedIconPath": "/icons/home-o.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "/icons/category.png",
      "selectedIconPath": "/icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "/icons/cart.png",
      "selectedIconPath": "/icons/cart-o.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-o.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}
 

image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。