[小程序]样式与配置

一、外部样式导入

使用**@import** 加外部样式表的相对路径并以 **;**表示语句结束。

复制代码
@import "common.wxss";

二、全局样式和局部样式

全局样式位于app.wxss中,会作用于整个项目中所有页面中。

局部样式 位于对应的wxss文件中,仅作用于当前页面,当全局样式和局部样式发生冲突时,会根据就近原则使用局部样式覆盖全局样式

三、全局配置与局部配置

1.全局配置

全局配置位于app.json文件下,常用配置项如下:

pages:所有页面的存放路径

window:窗口外观

tabBar:底边栏的效果

style:是否启用新版组件样式

2.window配置

小程序页面从上到下分为三个部分:导航栏 (navigateBar)、背景 (background)和页面主体(wxml),如下图所示

常见的window节点配置项如下:

|----------------------------|----------|----------------------------|
| navigateBarTitleText | String | 导航栏标题 |
| navigateBarBackgroundColor | HexColor | 导航栏背景色 |
| navigateBarTextStyle | String | 导航栏标题颜色(仅支持black或white) |
| backgroundColor | HexColor | 窗口背景色 |
| backgroundTextStyle | String | 下拉loading样式(仅支持dark/light) |
| enablePullDownRefresh | Bool | 是否开启全局下拉刷新 |
| onReachBottomDistance | Number | 上拉触底事件行程 |

3.tabBar

用于快速切换页面,类似于Panel。在小程序中分为顶部tabBar底部tabBar 。需要注意的是,如果设置了底部tabBar则不会显示对应的图标

tabBar最少设置2个标签,至多设置5个标签,。tabBar由6个部分组成,如下图所示:

配置方式如下:

python 复制代码
  "tabBar": {
    "list": [{
      "pagePath": "pages/homepage/home",
      "text": "主页"
    },
    {
      "pagePath": "pages/index/index",
      "text": "索引"
    }]
  },
相关推荐
鲲鹏猿22 分钟前
微信小程序——早餐小程序
微信小程序·小程序
说私域44 分钟前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_915909061 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck8 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域2 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往2 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw2 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友