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

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

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-731234.html

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

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

领支付宝红包 赞助服务器费用

相关文章

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

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

    2024年01月17日
    浏览(37)
  • 微信小程序(三)页面配置与全局配置

    注释很详细,直接上代码 上一篇 新增内容: 页面导航栏的属性配置 全局页面注册配置 全局导航栏配置 样式版本 源码: (标准的json是不能加注释的,但为了方便理解咱做个违背标准的决定) 页面: index.json 效果演示: 全局: app.json 效果演示: 这里有小伙伴问了,我就只用

    2024年02月02日
    浏览(33)
  • 微信小程序全局配置API域名和url

    微信小程序和后台进行交互是通过API请求数据,所以API请求地址的管理 就非常重要,如果在wx.request的时候使用写url地址的方式,那后面要是api地址变化了,就要到每个有请求的地方进行修改url,是大项目的话就会很麻烦,如果配置了全局请求地址修改起来就简单很多。 1.项

    2024年02月12日
    浏览(61)
  • 微信小程序之全局配置-window和tabBar

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月25日
    浏览(69)
  • 【微信小程序入门篇】全局配置 | 页面切换之tabBar配置项

    下面引用开发者文档中的介绍: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 tabBar:翻译为标签栏。 下面展示了两个小程序的 tab 栏,分别是在顶部、底部。 当我

    2024年02月02日
    浏览(39)
  • uniapp 微信小程序配置全局主题色、实现动态修改主题色

            本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色;第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片

    2024年02月01日
    浏览(34)
  • uni-app 微信小程序全局配置分享好友、朋友圈...

    使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友、朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加:  且onShareAppMessage()与onShareTimeline() 与methods同级!!! 官方网址:uniapp.dcloud.io/api/plugins… 这样做虽然实现了分享功能,

    2024年02月11日
    浏览(52)
  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(33)
  • 微信小程序---配置和属性(全局配置的简单使用,运算符以及一些常用属性)

    一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json 注意:配置文件中不能出现注释 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 普通快速启动项目 里边的 app.json 配置

    2023年04月27日
    浏览(32)
  • 微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月24日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包