Flex布局简介及微信小程序视图层View详解

目录

一、Flex布局简介

什么是flex布局？

flex属性

基本语法和常用属性

Flex 布局技巧

二、视图层View 

View简介

微信小程序View视图层

WXML

数据绑定

列表渲染

条件渲染

模板

WXSS

样式导入

内联样式

选择器

全局样式与局部样式

WXS

示例

注意事项

页面渲染

数据处理

一、Flex布局简介

Flex 布局（又称弹性盒子布局）是一种 CSS 布局模型，用来实现灵活的、可伸缩的布局方式。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性

Flex 布局语法教程网址：Flex 布局语法教程 | 菜鸟教程

什么是flex布局？

1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2) 任何一个容器都可以指定为Flex布局。

3) display: ‘flex’

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex属性

  • flex-direction 主轴的方向 默认为row

  • flex-wrap 如果一条轴线排不下，如何换行

  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式

  • justify-content 定义了项目在主轴上的对齐方式

  • align-items 定义项目在交叉轴上如何对齐

  • align-content 属性定义了多根轴线的对齐方式

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

基本语法和常用属性

Flex 布局的语法和属性较为灵活，允许开发者根据需求灵活地控制布局

父容器相关属性：

  • display: flex;：定义父容器采用 Flex 布局。
  • flex-direction: row|row-reverse|column|column-reverse;：设置主轴方向，决定项目的排列方向。
  • justify-content: flex-start|flex-end|center|space-between|space-around;：定义项目在主轴上的对齐方式。
  • align-items: flex-start|flex-end|center|baseline|stretch;：定义项目在交叉轴上的对齐方式。
  • flex-wrap: nowrap|wrap|wrap-reverse;：定义项目是否换行。

 子项目相关属性：

  • flex: none|flex-grow|flex-shrink|flex-basis;：设置一个项目的弹性属性。
  • order: <integer>;：定义项目的排列顺序。
  • align-self: auto|flex-start|flex-end|center|baseline|stretch;：单独定义某个项目在交叉轴上的对齐方式。

Flex 布局技巧

  • 等宽排列：如果希望子项目等宽排列，可以设置 flex: 1;，使它们平均分配剩余空间。

  • 垂直居中：要实现子项目在交叉轴上垂直居中，可以使用 justify-content: center; 和 align-items: center;。

  • 自动换行：当子项目内容长度超出父容器宽度时，可以利用 flex-wrap: wrap; 实现自动换行布局。

  • 响应式布局：Flex 布局非常适合响应式设计，通过媒体查询结合不同的 Flex 属性，在不同屏幕尺寸下实现灵活的布局调整。

  • 嵌套 Flex 布局：灵活运用嵌套的 Flex 容器，可以实现更复杂的布局结构，如多层嵌套的导航菜单或网格布局。

  • 弹性缩放：利用 flex-grow 和 flex-shrink 属性调整子项目的伸缩比例，实现不同子项目在空间分配上的灵活性。

二、视图层View 

View简介

视图层（View）是前端开发中常见的概念，用于表示用户界面中的可见元素，如页面中的按钮、文本框、图片等。在 Web 开发中，视图层通常由 HTML 元素组成，用于展示数据和与用户交互。

在前端框架中，如 React、Vue、Angular 等，视图层通常由组件（Component）来构建和管理。组件是视图层的模块化单位，包含了特定功能和样式，并可以被复用，有助于提高开发效率和维护性。

视图层的主要作用包括：

  1. 展示数据：将数据呈现给用户，如显示从后端获取的信息、用户输入的内容等。

  2. 用户交互：响应用户的操作，例如点击按钮、输入表单等，触发相应的事件和逻辑处理。

  3. 样式设计：通过 CSS 样式表来设置元素的外观和布局，使界面具有良好的视觉效果。

在现代的前端开发中，视图层往往与数据层（Model）和控制层（Controller 或 ViewModel）分离，采用 MVC 或 MVVM 等设计模式，实现了数据和视图的分离，提高了代码的可维护性和可扩展性。

微信小程序View视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

要完整了解 WXML 语法，请参考WXML 语法参考。

用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({data: {message: 'Hello MINA!'}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({data: {view: 'MINA'}
})
模板
<!--wxml-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})

具体的能力以及使用方式在以下章节查看：

数据绑定、列表渲染、条件渲染、模板、引用

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位

  • 样式导入

尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;
}
内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

    <view style="color:{{color}};" />

  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

    <view class="normal_view" />

选择器

目前支持的选择器有：

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容
全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

示例

  • 新建一个wxs文件

    var toDecimal2 = function (x) {var f = parseFloat(x);if (isNaN(f)) {return '0.00'}var f = Math.round(x * 100) / 100;var s = f.toString();var rs = s.indexOf('.');if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + 2) {s += '0';}return s;}//module.exports = toDecimal2
module.exports = {toDecimal2:toDecimal2
}
  •  在wxml中使用 
    <!--pages/c/c.wxml-->
<wxs src="../../wxs/PageUtils.wxs" module="PageUtils"></wxs>
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs>
<view><text>pages/c/c.wxml,</text><text>{{m1.message}}</text><view><text>{{PageUtils.toDecimal2(123.453)}}</text></view><view><button type="primary" bindtap="jump">跳转到D页面</button></view>
</view>
注意事项

  1. WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

  2. WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

  3. WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

  4. WXS 函数不能作为组件的事件回调。

  5. 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。

页面渲染
<!--wxml-->
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs><view> {{m1.message}} </view>

页面输出：hello world

数据处理
// page.js
Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]}
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {var max = undefined;for (var i = 0; i < array.length; ++i) {max = max === undefined ?array[i] :(max >= array[i] ? max : array[i]);}return max;
}module.exports.getMax = getMax;
</wxs><!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：5

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux系统化学习】文件重定向

【Linux系统化学习】文件重定向

目录 文件内核对象 文件描述符的分配规则 重定向 重定向的概念 dup2系统调用 输出重定向 追加重定向 输入重定向 stderr解析 重定向到同一个文件中 分离常规输出和错输出 文件内核对象 上篇文章中我们介绍到了操作系统中的文件&#xff0c;操作系统为了方…
阅读更多...
Shellcode免杀对抗(C/C++)

Shellcode免杀对抗(C/C++)

Shellcode C/C免杀&#xff0c;绕过360安全卫士、火绒安全、Defender C/C基于cs/msf的上线 首先是测试一下shellcode上线&#xff0c;主要是俩种方法 测试环境 攻击机&#xff1a;kali2023 靶机&#xff1a;win10 msf方法 首先是启动msf msfconsole 然后msf生成一个sh…
阅读更多...
CES 2024：NVIDIA 通过新的笔记本电脑、GPU 和工具提供生成式 AI

CES 2024：NVIDIA 通过新的笔记本电脑、GPU 和工具提供生成式 AI

在 CES 2024 上&#xff0c;NVIDIA 推出了一系列硬件和软件&#xff0c;旨在释放 Windows 11 PC 上生成式 AI 的全部潜力。 在 PC 上本地运行生成式 AI 对于隐私、延迟和成本敏感型应用程序至关重要。在 CES 上&#xff0c;NVIDIA 将在整个技术堆栈中带来新的创新&#xff0c;…
阅读更多...
C#开源免费的Windows右键菜单管理工具

C#开源免费的Windows右键菜单管理工具

前言 今天分享一个C#开源、免费、纯粹的Windows右键菜单管理工具&#xff1a;ContextMenuManager。 工具主要功能 程序支持国际化多语言显示。启用或禁用文件、文件夹、新建、发送到、打开方式、自定义文件格式、IE浏览器、WinX等右键菜单项目。对上述场景右键菜单项目进行修…
阅读更多...
【NI-DAQmx入门】数据采集中的降噪技术

【NI-DAQmx入门】数据采集中的降噪技术

1.什么是噪声&#xff1f; 噪声是电路中存在的与期望信号不同的任何电信号 噪声可以降低&#xff0c;但不能消除 噪声可以在源头处被抑制 通过耦合可以降低数据传输通道的噪声 2.噪声耦合方法 导电性 电容性 感应性 其他 3.传导耦合噪声 来自不同电路的电流在一个公共阻抗中共…
阅读更多...
⭐北邮复试刷题103. 二叉树的锯齿形层序遍历

⭐北邮复试刷题103. 二叉树的锯齿形层序遍历

103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 示例 1&#xff1a;输入&#xff1a…
阅读更多...
英文论文（sci）解读复现【NO.21】一种基于空间坐标的轻量级目标检测器无人机航空图像的自注意

英文论文（sci）解读复现【NO.21】一种基于空间坐标的轻量级目标检测器无人机航空图像的自注意

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…
阅读更多...
AutoKeras(Python自动化机器学习)多模态数据和多任务

AutoKeras(Python自动化机器学习)多模态数据和多任务

要点拓扑 AutoKeras 拓扑 要点 常规机器学习&#xff1a;scikit-learn示例探索性数据分析和数据预处理&#xff0c;线性回归&#xff0c;决策树图像分类ResNet模型示例&#xff0c;合成数据集DenseNet模型示例绘图线性回归和决策树模型使用Python工具seaborn、matplotlib、pan…
阅读更多...
论文阅读：四足机器人对抗运动先验学习稳健和敏捷的行走

论文阅读：四足机器人对抗运动先验学习稳健和敏捷的行走

论文&#xff1a;Learning Robust and Agile Legged Locomotion Using Adversarial Motion Priors 进一步学习&#xff1a;AMP&#xff0c;baseline方法&#xff0c;TO 摘要&#xff1a; 介绍了一种新颖的系统&#xff0c;通过使用对抗性运动先验 (AMP) 使四足机器人在复杂地…
阅读更多...
Github项目推荐-Tiny-Rdm

Github项目推荐-Tiny-Rdm

项目地址 GitHub - tiny-craft/tiny-rdm: A Modern Redis GUI Client 项目简述 一个开源的Redis管理工具&#xff0c;有漂亮的界面和丰富的功能。使用的编程语言如下 项目截图
阅读更多...
【IIS中绑定SSL证书】

【IIS中绑定SSL证书】

下载SSL证书&#xff1a; 打开服务器IIS&#xff1a; 点击导入 在IIS中新增网站&#xff1a;
阅读更多...
【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱8（附带项目源码）

【制作100个unity游戏之25】3D背包、库存、制作、快捷栏、存储系统、砍伐树木获取资源、随机战利品宝箱8（附带项目源码）

效果演示 文章目录 效果演示系列目录前言砍树功能源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第25篇中&#xff0c;我们将探索如何用unity制作一个3D背包、库存、制作、快捷栏、存…
阅读更多...
NodeJS背后的人：Express

NodeJS背后的人：Express

NodeJS背后的人&#xff1a;Express 本篇文章&#xff0c;学习记录于&#xff1a;尚硅谷&#x1f3a2; 文章简单学习总结&#xff1a;如有错误 大佬 &#x1f449;点. 前置知识&#xff1a;需要掌握了解&#xff1a; JavaScript基础语法 、Node.JS环境API 、前端工程\模块化 …
阅读更多...
【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

一、程序地址空间回顾 在学习 C/C 时&#xff0c;我们知道内存会被分为几个区域&#xff1a;栈区、堆区、全局/静态区、代码区、字符常量区等。但这仅仅是在语言层面上的理解&#xff0c;是远远不够的。 如下空间布局图&#xff0c;请问这是物理内存吗&#xff1f; 不是&…
阅读更多...
Acwing 周赛143 解题报告 | 珂学家 | 状压DP

Acwing 周赛143 解题报告 | 珂学家 | 状压DP

前言 整体评价 被这个T2难住了, 幸好最后磨出来了&#xff0c;感觉蛮头痛的。T3是道状压题&#xff0c;这个反而容易写。 A. 时间 思路: 模拟 取模&#xff0c;但是对0要改成12 n int(input())r n % 12print (12 if r 0 else r)B. 数对推理 思路: 按题意模拟 如果一组…
阅读更多...
Kubernetes 元信息与控制器模型

Kubernetes 元信息与控制器模型

一、资源元信息&#xff1a; Kubernetes 的资源对象组成&#xff1a;主要包括了 Spec、Status 和元数据。其中 Spec 部分用来描述期望的状态&#xff0c;Status 部分用来描述观测到的状态。 元数据主要包括了&#xff1a;Labels 用来识别资源的标签&#xff1b;Annotations 用…
阅读更多...
EasyUI动态加载组件

EasyUI动态加载组件

要实现如下的效果&#xff0c;在表格中显示进度条 主要是需要再次初始化组件&#xff0c;借用ChatGPT的意思是&#xff1a; 在许多 JavaScript UI 框架中&#xff0c;包括 EasyUI&#xff0c;在动态地创建或插入新的 DOM 元素后&#xff0c;通常需要手动初始化相关的组件或特性…
阅读更多...
DPU技术的进步：赋予未来创新力量

DPU技术的进步：赋予未来创新力量

随着云计算和虚拟化技术的发展&#xff0c;网卡在功能和硬件结构方面也经历了四个阶段&#xff0c;即网卡、智能网卡、基于FPGA的DPU和DPU SoC网卡。本文将重点介绍这些不同类型的网络适配器和处理器&#xff0c;在硬件、可编程能力、开发和应用方面的特点。 网卡的演进和应用…
阅读更多...
第四节笔记：XTuner 大模型单卡低成本微调实战

第四节笔记：XTuner 大模型单卡低成本微调实战

视频链接&#xff1a;https://www.bilibili.com/video/BV1yK4y1B75J/?spm_id_from333.788&vd_source3bbd0d74033e31cbca9ee35e111ed3d1 课程笔记&#xff1a; 1.Finetune简介 指令微调&#xff1a; 开始的大模型可能不知道问的是问题 这三种角色的划分只有在微调训练阶…
阅读更多...
LeetCode、452. 用最少数量的箭引爆气球【中等，贪心，区间问题】

LeetCode、452. 用最少数量的箭引爆气球【中等，贪心，区间问题】

文章目录 前言LeetCode、452. 用最少数量的箭引爆气球【中等&#xff0c;贪心&#xff0c;区间问题】题目链接与分类思路贪心&#xff0c;连续区间数量问题 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023