做招聘的网站,电工培训学校,wordpress增加广告位,微网站 免费文章目录 前置准备工作安装HBuilder-X新建uniapp项目教程使用HBuilder-X启动uniapp项目教程 实现底部导航栏package.json中配置导航栏详细配置内容 前置准备工作
安装HBuilder-X
详细步骤可看上文》》
新建uniapp项目教程
详细步骤可看上文》》
使用HBuilder-X启动uniapp项… 文章目录 前置准备工作安装HBuilder-X新建uniapp项目教程使用HBuilder-X启动uniapp项目教程 实现底部导航栏package.json中配置导航栏详细配置内容 前置准备工作
安装HBuilder-X
详细步骤可看上文》》
新建uniapp项目教程
详细步骤可看上文》》
使用HBuilder-X启动uniapp项目教程
详细步骤可看上文》》
实现底部导航栏
package.json中配置导航栏
在package.json里面配置点击package.json文件。 在内容中添加底部菜单代码配置
tabBar: {color: #7A7E83,selectedColor: #3cc51f,borderStyle: black,backgroundColor: #ffffff,list: [{pagePath: pages/component/index,iconPath: static/image/icon_component.png,selectedIconPath: static/image/icon_component_HL.png,text: 组件}, {pagePath: pages/API/index,iconPath: static/image/icon_API.png,selectedIconPath: static/image/icon_API_HL.png,text: 接口}]
} 页面效果 注意地址需要有页面才行不然不会显示底部导航栏
详细配置内容
以下是 TabBar 的相关属性说明
属性名类型必填默认值描述适配版本colorHexColor是-tab 上的文字默认颜色-selectedColorHexColor是-tab 上的文字选中时的颜色-backgroundColorHexColor是-tab 的背景色-borderStyleString否blacktabbar 上边框的颜色可选值 black/whiteblack 对应颜色 rgba(0,0,0,0.33)white 对应颜色 rgba(255,255,255,0.33)App 2.3.4 、H5 3.0.0blurEffectString否noneiOS 高斯模糊效果可选值 dark/extralight/light/none参考: 使用说明App 2.4.0 支持、H5 3.0.0只有最新版浏览器才支持listArray是-tab 的列表详见 list 属性说明最少2个、最多5个 tab-positionString否bottom可选值 bottom、toptop 值仅微信小程序支持-fontSizeString否10px文字默认大小App 2.3.4、H5 3.0.0iconWidthString否24px图标默认宽度高度等比例缩放App 2.3.4、H5 3.0.0spacingString否3px图标和文字的间距App 2.3.4、H5 3.0.0heightString否50pxtabBar 默认高度App 2.3.4、H5 3.0.0midButtonObject否-中间按钮仅在 list 项为偶数时有效App 2.3.4、H5 3.0.0iconfontSrcString否-list 设置 iconfont 属性时需要指定字体文件路径App 3.4.4、H5 3.5.3backgroundImageString否-设置背景图片优先级高于 backgroundColorAppbackgroundRepeatString否-设置标题栏的背景图平铺方式可取值“repeat” - 背景图片在垂直方向和水平方向平铺“repeat-x” - 背景图片在水平方向平铺垂直方向拉伸“repeat-y” - 背景图片在垂直方向平铺水平方向拉伸“no-repeat” - 背景图片在垂直方向和水平方向都拉伸。默认使用 “no-repeat”AppredDotColorString否-tabbar 上红点颜色App
注
HexColor 表示十六进制颜色值例如 #FF0000 表示红色。String 表示字符串类型。Array 表示数组类型。Object 表示对象类型。 您好我是肥晨。 欢迎关注我获取前端学习资源日常分享技术变革生存法则行业内幕洞察先机。
