小程序学习day06-wx:for续、WXSS模版样式、rpx尺寸单位、@import、全局样式与局部样式、全局配置

news2025/1/12 20:46:50

25、wx:for续

(5)手动指定索引和当前项的变量名

        1)使用wx:for-index可以指定当前循环项的索引变量名
        2)使用wx:for-item可以指定当前项的变量名

(6)wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定一个唯一的key值,从而提高渲染的效率

26、WXSS模版样式

(1)概念:一套样式语言

(2)作用:美化WXML的组件样式,类似于网页开发者的CSS

(3)WXSS和CSS的关系

        1)相同点:
都有通用的选择器、通用的样式规则
        2)不同点
        ①CSS具有选择器样式规则
        ②WXSS具有rpx尺寸单位,@import样式导入

27、rpx尺寸单位

(1)作用:用来解决平时配的尺寸单位

(2)rpx实现原理:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)

        1)在较小的设备上,1px所代表的宽度较小
        2)在较大的设备上,1px代表的宽度较大

(3)rpx与px单位换算(开发小程序时,设计师可以用iPhone6作为视觉稿的标准)

        iPhone5:1rpx=0.42px

        iPhone6:1rpx=0.5px

        iPhone7:1rpx=0.552px

28、@import

(1)作用:使用@import,可以导入外联的样式表

(2)语法:@import后跟导入样式的路径,并以分号结尾

(3)示例:

        1)代码准备:

        2)在需要地方的wxss文件中导入

        3)渲染

29、全局样式与局部样式

(1)全局样式

        1)概念:定义在app.wxss中的样式,作用于所有页面
        2)示例:

在list页面

在index页面

(2)局部样式

        1)在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面
        2)示例:

(在list.wxss页面中修改字体颜色,不会作用到index页面)

(3)注:

1)当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式

2)当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局样式

30、全局配置

(1)全局配置文件:小程序根目录下的app.json文件

(2)常见配置项(可在app.json的window中找到):

        1)pages(记录当前小程序所有页面的存放路径)
        2)window(全局设置小程序窗口的外观)

初始:

        ①navigationBarTitleText(String):默认值字符串,导航栏标题文字内容

        ②navigationBarBackgroundColor(HexColor):默认值#000000,导航栏背景颜色

        ③navigationBarTexrStyle(String):默认值white,导航栏标题颜色,仅支持black/white

        ④backgroundColor(HexColor):默认值#ffffff,窗口的背景色(下拉刷新时可以看见)

⑤backgroundTextStyle(String):默认值dark,下拉loading样式(小圆点),仅支持dark/light

⑥enablePullDownRefresh(Boolean):默认值false,,是否开启全局下拉刷新

⑦onReachBottomDistance(Number):默认值50,页面上拉触底事件触发时距底 部的距离,单位为px(无特殊需求,不建议修改)

3)tabBar(设置小程序底部的tabBar效果)(tabBar标签路径在pages中的最前面)
        ①作用:用于实现多页面的快速切换
        ②分类:顶部tabBar和底部tabBar
        ③注:

                tabBar中配置最少2个,最多5个;

                当渲染顶部rabBar时,不显示icon,只显示文本

④tabBar节点的配置项
Position(tabBar的位置,仅支持bottom/top):String类型,非必选项,默认值为bottom;

borderStyle(tabBar上边框的颜色,仅支持black/white):String类型,非必选项,默认值为black;

color(tab上文字未选中时的颜色):HexColor类型,非必选项;

selectedColor(tab上文字选中时的颜色):HexColor类型,非必选项;

backgroundColor(tabBar的背景色):HexColor类型,非必选项;

list(tab页的列表):Array类型,必选项(最少2个,最多5个tab)

⑤tabBar的6个组成部分
        backgroundColor:tabBar的背景颜色
        selectedIconPath:选中时的图片路径
        borderStyle:tabBar上边框的颜色
        iconPath:未选中时的图片路径
        selectedColor:tab上的文字被选中时的颜色
        color:tab上文字未选中(默认)的颜色
⑥每个tab的配置选项
        pagePath(页面路径,页面必须在pages中定义):String类型,必选项;
        text(tab上显示的文字):String类型,必选项;
        iconPath(未选中时的图标路径,当position为top时,不显示icon):String类型,非必选项;
        selectedIconPath(选中时的图标路径,当position为top时,不显示icon):String类型,非必选项;

4)style(是否启用新版的组件样式)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2040016.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2025考研西安电子科技大学马克思主义理论经验贴

学长从西安电子科技大学马克思主义理论专业毕业,现从事高校思政课工作,拥有三年西安电子科技大学马理论考研辅导经验,现写出2025西安电子科技大学马克思主义理论经验贴供大家参考。 一、选学校 选学校首先考虑的是就业,因为咱们…

【书生大模型实战营(暑假场)】基础任务四 InternLM+LlamaIndex RAG 实践

基础任务四 InternLMLlamaIndex RAG 实践 任务文档视频Retrieval-Augmented Generation for Large Language Models: A Survey 文章目录 基础任务四 InternLMLlamaIndex RAG 实践1 理解RAG,使用 RAG1.1 RAG技术概览1.2 RAG工作原理1.3 向量数据库 Vector-DB1.4 RAG…

多态(二)

1. final &#xff1a;修饰虚函数&#xff0c;表示该虚函数不能再被重写 class Car { public:virtual void Drive() final {} }; class Benz :public Car { public:virtual void Drive() {cout << "Benz-舒适" << endl;} }; 2. override: 检查派生类…

如何选取网络中间的输出?并极简方法可视化

文章目录 一、提供几种方法1. 直接修改模型的 forward 方法&#xff1a;2. 使用 hook 函数&#xff1a;3. 直接访问模型的子模块&#xff1a;4. 使用 nn.Sequential 来提取中间层&#xff1a; 2. 如何选择方法3. 实际操作——提取特征并可视化1. 可视化2. 提取特征 一、提供几种…

无人机之电池注意事项

1、外场作业时&#xff0c;电池一定要放置在阴凉处&#xff0c;避免太阳直射&#xff1b; 2、刚作业完的电池发热严重时&#xff0c;请降至室温再充电&#xff1b; 3、注意电池状态&#xff0c;一旦发现电池出现鼓包、漏液等现象&#xff0c;必须马上停止使用&#xff1b; 4…

基于springboot的医院资源管理系统

TOC springboot158基于springboot的医院资源管理系统 第1章 绪论** 1.1 课题背景 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供…

Redmi 13C 5G 红米13R 5G 解锁BL 降级 MIUI 秒解锁BL 澎湃OS 降级

机型名称 &#xff1a;Redmi 13C 5G/ Redmi 13R 5G/ POCO M6 5G 机型代号 &#xff1a;air HyperOS 降级MIUI 14 澎湃OS 或者miui都可以秒解锁BL&#xff0c; Redmi 13C 5G 红米13R 5G 解锁BL 降级 MIUI 秒解锁BL 澎湃OS 降级,手机ROM - Powered by Discuz!点击上方 下载对…

大迈u盘文件不见了怎么办?全面解析与恢复策略

在数字化时代&#xff0c;U盘作为我们日常工作、学习和生活中不可或缺的存储设备&#xff0c;承载着大量的重要文件。然而&#xff0c;面对突如其来的U盘文件丢失问题&#xff0c;许多用户往往会感到手足无措&#xff0c;甚至因此遭受不可估量的损失。本文将围绕“大迈U盘文件丢…

算法与数据结构笔记

算法是什么 算法定义 算法&#xff08;algorithm&#xff09;是在有限时间内解决特定问题的一组指令或操作步骤&#xff0c;它具有以下特性。 ‧ 问题是明确的&#xff0c;包含清晰的输入和输出定义。 ‧ 具有可行性&#xff0c;能够在有限步骤、时间和内存空间下完成。 ‧…

多种方案解决IOS下uni.share分享分包页面报错Error: Framework inner error

项目场景&#xff1a; 有个需求是用uni.share从app分享微信小程序&#xff0c;发现在苹果手机真机调试的时候 跳转的目标页面会白屏、页面样式错乱、一些组件不出现等问题。并且报错 Error: Framework inner error 问题描述 uniapp开发在苹果手机下app分享微信小程序会出现白…

Golang | Leetcode Golang题解之第336题回文对

题目&#xff1a; 题解&#xff1a; // 哈希表实现 class Solution {public List<List<Integer>> palindromePairs(String[] words) {List<List<Integer>> res new ArrayList<>();int n words.length;Map<String, Integer> indices ne…

Nvidia显卡在深度学习应用中一些概念解释

之前一直在搞深度学习&#xff0c;最近又想着安装一下mamba试一下效果&#xff0c;可以配置环境就花了好长时间&#xff0c;主要还是一些概念没有弄明白&#xff0c;这里记录一下&#xff0c;方便以后查阅。 Nvidia显卡在深度学习应用中一些概念解释 显卡中一些名词的解释CUDA …

ZooKeeper集群环境部署

1. ZooKeeper安装部署 1.1 系统要求 1.1.1 支持的平台 ZooKeeper 由多个组件组成。一些组件得到广泛支持&#xff0c;而另一些组件仅在较小的一组平台上得到支持。 客户端是 Java 客户端库&#xff0c;由应用程序用于连接到 ZooKeeper 集群。 服务器是在 ZooKeeper 集群节点…

服务器主要有什么用途?什么情况下需要服务器?

服务器主要用于在网络中提供各种服务和资源。它们是现代信息技术基础设施的核心组成部分&#xff0c;用于存储、处理和管理数据&#xff0c;并为客户端设备&#xff08;如个人电脑、移动设备等&#xff09;提供所需的服务。以下是服务器的一些主要用途&#xff1a; 文件共享与存…

shell 三剑客-sed

sed 是Linux 系统一款非常强大的非交互式的文本编辑器&#xff0c;可以对文本进行增删改查操作&#xff0c;正则匹配文本内容。适合大文件编辑 sed 语法 sed 选项 ‘指令’ 文件 sed 选项 -f 包含sed指令的文件 文件 常用参数 -i&#xff1a;直接修改文件内容&#xff0c;而不…

用R语言运用 Shiny 包打造基于鸢尾花数据集的交互式数据可视化应用

下面内容摘录自《R 语言与数据科学的终极指南》专栏文章的部分内容&#xff0c;每篇文章都在 5000 字以上&#xff0c;质量平均分高达 94 分&#xff0c;看全文请点击下面链接&#xff1a; 1章4节&#xff1a;数据可视化&#xff0c; R 语言的静态绘图和 Shiny 的交互可视化演…

普通人看清房价走势的简单方法

研究了很多宏观方面的房价影响因素&#xff0c;还是很容易被看空和看多的房地产文章左右&#xff0c;也容易受到各种影响。 针对普通人而言&#xff0c;想要看清房价走势非常简单的一个方法&#xff0c; 你就看看你的工作状态【或者身边找工作的人多不多】 当你能挑工作的时…

老友记台词 第一季 第十三集 Friends 113(全英版)

文章目录 113 The One With the Boobies[Scene: Monica and Rachels, Chandler walks in and starts raiding the fridge. Then Rachel comes out of the shower with a towel wrapped round her waist, drying herself with another towel. Chandler and Rachel startle each …

CSC5613C 同步降压DC/DC

CSC5613C是一款同步降压型的DCDC变换器 IC&#xff0c;其输入电压为8~30V&#xff0c;具有良好的瞬态响应和环路稳定性。CSC5613C外围元器件极少&#xff0c;具有线补、过流保护和热保护功能。可通过调节FB电阻比例,来调整输出电压可用于快充。CSC5613C带载启动电流与其最大输出…

地下管线三维建模工具MagicPipe3D V3.5.2发布

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网三维模型&#xff08;包括管道、接头、附属设施等&#xff09;&#xff0c;输出标准3DTiles、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析&…