2.配置tabBar

最新推荐文章于 2024-09-14 15:26:51 发布

不蒸馒头曾口气

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量258

点赞数 12

分类专栏：二手交易平台文章标签： html uni-app vue vue.js javascript node.js scss

本文链接：https://blog.csdn.net/qq_62652856/article/details/136631927

版权

二手交易平台专栏收录该内容

21 篇文章 0 订阅

订阅专栏

创建页面

分别创建home(首页)、write(发布)、unused(闲置)、buy(求购)、mine(我的)页面

点击shop-zy -> src -> pages
修改其中默认的index文件
将选中部分改为首页
在pages中新建页面

注意勾选在pages.json中注册
分别创建home(首页)、write(发布)、unused(闲置)、buy(求购)、mine(我的)页面

配置tabBar

官网地址
https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

pages.json

在pages.json 的pages中添加每个页面的名称
在globalStyle设置应用的状态栏、导航条、标题、窗口背景色等

"globalStyle": {
    //导航字体颜色，仅支持black和white
		"navigationBarTextStyle": "white",
    //导航全局标题，当前页面没有配置时生效
		"navigationBarTitleText": "简易二手交易",
    //导航字体颜色
		"navigationBarBackgroundColor": "#79b2f8",
    //下拉显示出来的窗口的背景色
		"backgroundColor": "#F8F8F8"
	}

添加tabBar(可复制官网代码示例)
tabBar图标制作
注册/登录iconfont官网
https://www.iconfont.cn/

"tabBar": {
  	"color": "#7A7E83",
    //默认文字颜色
  	"selectedColor": "#376199",
    //选中文字颜色
  	"borderStyle": "black",
    //上边框颜色
  	"backgroundColor": "#ffffff",
  	"list": [{
  		"pagePath": "pages/index/index",
  		"iconPath": "static/home.png",
      //默认图片
  		"selectedIconPath": "static/home_select.png",
      //选中后图片
  		"text": "首页"
  	}, {
  		"pagePath": "pages/unused/unused",
  		"iconPath": "static/unused.png",
  		"selectedIconPath": "static/unused_select.png",
  		"text": "闲置"
  	}, {
  		"pagePath": "pages/write/write",
  		"iconPath": "static/write.png",
  		"selectedIconPath": "static/write_select.png",
  		"text": "发布"
  	}, {
  		"pagePath": "pages/buy/buy",
  		"iconPath": "static/buy.png",
  		"selectedIconPath": "static/buy_select.png",
  		"text": "求购"
  	}, {
  		"pagePath": "pages/mine/mine",
  		"iconPath": "static/mine.png",
  		"selectedIconPath": "static/mine_select.png",
  		"text": "我的"
  	}]
  }