1. Toy模板网首页
  2. > Toy博客

微信小程序 样式和全局配置 WXSS

4月前 作者：程序员小刚 分类：Toy博客 阅读(34) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序 样式和全局配置 WXSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

WXSS

wxss 把屏幕分为750个物理像素，大屏大，小屏小，随着设备不一致自动适配

推荐使用iPhone6作为标准，1个rpx = 0.5个px，把px乘以2就是rpx的参数

@import  

导入外部样式表

@import '/common/common.wxss'

微信小程序 样式和全局配置,微信小程序,微信小程序

 样式

微信小程序 样式和全局配置,微信小程序,微信小程序

 权重一样时，局部样式可以覆盖全局样式

配置

导航栏区域 navigationBar

背景区域 backgroud

页面主体区域

window

可以配置【导航栏区域 navigationBar】和【背景区域 backgroud】

微信小程序 样式和全局配置,微信小程序,微信小程序

 背景颜色

微信小程序 样式和全局配置,微信小程序,微信小程序

导航栏标题颜色

微信小程序 样式和全局配置,微信小程序,微信小程序

设置全局下拉 

微信小程序 样式和全局配置,微信小程序,微信小程序

下拉刷新的背景颜色 

微信小程序 样式和全局配置,微信小程序,微信小程序

下拉刷新时小圆点的样式

微信小程序 样式和全局配置,微信小程序,微信小程序

 下拉触底的触发值，默认50

微信小程序 样式和全局配置,微信小程序,微信小程序

tabBar

tabBar 最少2个，最多5个

如果是底部，可以显示ICON和文本，如果是顶部，只显示文本

tabBar配置项

backgroundColor：背景颜色

borderStyle：边框颜色

iconPath：未选中的图片路径

selectedIconPath：选中的图片路径

color：未选中的文字颜色

selectedColor：选中的文字颜色

tabBar配置项属性

参考：https://www.cnblogs.com/xinjingsiyuan/articles/16875767.html

微信小程序 样式和全局配置,微信小程序,微信小程序

 文章来源地址https://www.toymoban.com/news/detail-610494.html

到了这里，关于微信小程序 样式和全局配置 WXSS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 ＜view＞＜/view＞容器嵌套，wxss样式修改内部内部样式不产生效果

    微信小程序 ＜view＞＜/view＞容器嵌套，wxss样式修改内部内部样式不产生效果

    网上关于”微信小程序讲的知识很少“，微信开发文档对于新手不是很友好，但是建议一定要学会看文档。 问题如下： 我写了好几个view/view 容器嵌套，我在对内部容器包括的内容做修改时，不产生效果，后来发现这是因为引用方式有误。 ’ view 示例二/view   view class = 

    2024年02月17日
    浏览(21)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上） 🐳博客主页：苏凉.py的博客 🌐系列专栏：小程序开发基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(18)

  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法，是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式，再用普通的动态class判断改变就可以了。 例如：改变背景颜色 参考：微信小程序如何动态修改page标签的css样式 设置id时需要注意下：id 的设置要求是字母

    2024年02月05日
    浏览(18)
  • 微信小程序使用scss编译wxss文件的配置步骤

    微信小程序使用scss编译wxss文件的配置步骤

    微信小程序开发者工具集成了 vscode 编辑器，可以使用 vscode 中众多的插件，为我们开发微信小程序提供了极大的便利。 可以借助 easysass 插件实现在微信开发中使用 sass，安装步骤如下。 1、在 vscode 中搜索 easysass 插件并安装 2、在微信开发工具中导入安装的easysass插件 3、修改

    2024年02月09日
    浏览(27)
  • WXSS的全局样式和局部样式

    WXSS的全局样式和局部样式

        WXSS中的样式和css差不多，是用于给WXML页面来设置样式的，但是WXSS中扩展了rpx尺寸单位和@import样式导入    rpx:根据不同的屏幕自动进行适配，把设备屏幕的宽度等分为750份(设备的总宽度750rpx)   @import: 用于进行样式的导入   1.新建一个文件夹p，在这个文件夹下建一个以

    2024年02月12日
    浏览(15)
  • 微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了部分常用配置选项的 app.json ： 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配

    2024年02月01日
    浏览(16)

  • 无插件，简单配置prettier，将微信小程序的wxml和wxss当作html和css进行格式化

    使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。 prettier是根据默认的解析器对相应的文件进行处理，我们可以自定义什么格式的文件用什么解析器。具体看 documentSelectors。 只列出有关的配置 编辑器的配置 设置wxml和wxss文件的默认格式化工具为prettier 配置pre

    2024年02月09日
    浏览(19)
  • 微信小程序全局配置

    微信小程序全局配置

    小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下： ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样式  设置步骤：app.json - window - navigationBarTitle

    2024年04月17日
    浏览(9)
  • 微信小程序全局配置详解

    微信小程序全局配置详解

    登录网址 https://mp.weixin.qq.com/ 注册网址 https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 描述整体的app app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 描述各自页面的page 为了方便开发者减少配置项，

    2024年02月13日
    浏览(18)
  • 微信小程序-----全局配置与页面配置

    微信小程序-----全局配置与页面配置

    目录 前言 全局配置文件 一、window 1. 小程序窗口的组成部分 2. window 节点常用的配置项 3. 设置导航栏的标题  4. 设置导航栏的背景色  5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离

    2024年01月17日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包