建设网站设计专业服务,闽侯县建设局网站,零基础自学做网站,硬件开发语言有哪些我们今天的学习目标 基础语法1. 创建新页面2.pages配置页面3.tabbar配置4.condition 启动模式配置 基础语法
1. 创建新页面 2.pages配置页面
属性类型默认值描述pathString配置页面路径styleObject配置页面窗口表现#xff0c;配置项参考pageStyle 我们来通过style修改页面的… 我们今天的学习目标 基础语法1. 创建新页面2.pages配置页面3.tabbar配置4.condition 启动模式配置 基础语法
1. 创建新页面 2.pages配置页面
属性类型默认值描述pathString配置页面路径styleObject配置页面窗口表现配置项参考pageStyle 我们来通过style修改页面的标题 和导航栏背景色并且设置h5下拉刷新 的特有样式
3.tabbar配置
在 Uni-app 中配置 tabBar底部导航栏是一个常见的需求。Uni-app 提供了便捷的配置方式通过修改 pages.json 文件来配置 tabBar。以下是一个基本的配置示例 打开 pages.json 文件 这个文件通常位于项目的根目录下。 添加或修改 tabBar 配置
{ pages: [ { path: pages/index/index, style: { navigationBarTitleText: 首页, navigationBarTextStyle: white, navigationBarBackgroundColor: #3cc51f, enableBackToRoot: true } }, { path: pages/list/list, style: { navigationBarTitleText: 列表页, navigationBarTextStyle: black, navigationBarBackgroundColor: #ffffff, app-plus: { titleNView: false } } }, { path: pages/detail/detail, style: { navigationBarTitleText: 详情页, navigationBarTextStyle: white, navigationBarBackgroundColor: #ff0000, navigationBarHidden: true } } // 可以继续添加更多页面配置 ], // 其他配置如 tabBar、globalStyle 等...
}配置说明
path页面的路径相对于项目的 pages 目录。例如pages/index/index 表示 pages/index/ 目录下的 index.vue 文件。style页面的样式配置。navigationBarTitleText导航条标题文字。navigationBarTextStyle导航条标题文字颜色可选值为 black 或 white。navigationBarBackgroundColor导航条背景颜色。enableBackToRoot是否允许点击返回按钮时返回到应用的首页根页面。默认为 false。navigationBarHidden是否隐藏导航条。可选值为 true隐藏或 false显示。注意在某些平台上如小程序隐藏导航条可能需要额外的配置。app-plus针对 App 平台如 HBuilderX 打包的 App的特定配置。例如titleNView 可以用于自定义原生导航栏。
是不是不想看这样的文字(^o^)
属性类型是否必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色仅支持black/whiteApp 2.3.4 支持其他颜色值listArray是tab 的列表详见 list 属性说明最少2个、最多5个 tabpositionString否bottom可选值 bottom、toptop 值仅微信小程序支持
属性类型是否必填说明pagePathString是页面路径必须在 pages 中先定义StringtextString是tab 上按钮文字在 5APP 和 H5 平台为非必填。例如中间可放一个没有文字的号图标iconPathString否图片路径icon 大小限制为40kb建议尺寸为81px*81px当postion 为 top时此参数无效不支持网络图片不支持字体图标selected I(大写的i) conPathString否选中时的图片路径icon 大小限制为40kb建议尺寸为81px*81pX,当postion 为 top 时此参数无效 注意事项 路径正确性确保 path 指定的页面路径正确且对应的 .vue 文件存在于该路径下。样式兼容性不同平台如 H5、小程序、App对样式的支持可能有所不同。因此在配置样式时需要注意各平台的兼容性。动态路由Uni-app 不直接支持动态路由但可以通过编程方式实现页面的跳转和参数的传递。tabBar 配置如果需要在底部添加选项卡tabBar需要在 pages.json 中单独配置 tabBar 部分并将需要作为选项卡页面的 path 添加到 tabBar.list 中。 通过以上配置你可以在 Uni-app 中定义多个页面并为每个页面设置不同的导航条样式和其他属性。
4.condition 启动模式配置
启动模式配置仅在开发期间生效用于模拟直达页面的场景比如小程序转发后、用户点击所打开的页面等
属性说明
属性类型是否必填描述currentNumber是当前激活的模式list节点的索引值listArray是启动模式列表
list说明
属性类型是否必填描述nameString是启动模式名称pathString是启动页面路径queryString否启动参数可以在页面的onLoad函数里获得
