uni-app基础语法（一）

基础语法

1. 创建新页面

2.pages配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考pageStyle

我们来通过style修改页面的标题 和导航栏背景色，并且设置h5下拉刷新 的特有样式

3.tabbar配置

在 Uni-app 中配置 tabBar（底部导航栏）是一个常见的需求。Uni-app 提供了便捷的配置方式，通过修改 pages.json 文件来配置 tabBar。以下是一个基本的配置示例：

1. 打开 pages.json 文件：
   这个文件通常位于项目的根目录下。

2. 添加或修改 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^)

属性	类型	是否必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

属性	类型	是否必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义String
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为81px*81px，当postion 为 top时，此参数无效，不支持网络图片，不支持字体图标
selected I(大写的i) conPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为81px*81pX,当postion 为 top 时，此参数无效

注意事项

1. 路径正确性：确保 path 指定的页面路径正确，且对应的 .vue 文件存在于该路径下。
2. 样式兼容性：不同平台（如 H5、小程序、App）对样式的支持可能有所不同。因此，在配置样式时，需要注意各平台的兼容性。
3. 动态路由：Uni-app 不直接支持动态路由，但可以通过编程方式实现页面的跳转和参数的传递。
4. tabBar 配置：如果需要在底部添加选项卡（tabBar），需要在 pages.json 中单独配置 tabBar 部分，并将需要作为选项卡页面的 path 添加到 tabBar.list 中。

通过以上配置，你可以在 Uni-app 中定义多个页面，并为每个页面设置不同的导航条样式和其他属性。

4.condition 启动模式配置

启动模式配置仅在开发期间生效，用于模拟直达页面的场景比如：小程序转发后、用户点击所打开的页面等

属性说明

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可以在页面的onLoad函数里获得

原文地址：https://blog.csdn.net/2301_78884095/article/details/142855926

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！