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.rhkb.cn/news/258804.html

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

相关文章

深入理解lambda表达式

深入理解lambda表达式

深入理解ASP.NET Core中的中间件和Lambda表达式 var builder WebApplication.CreateBuilder(args); var app builder.Build(); app.Use(async (context, next) > { // Add code before request. await next(context);// Add code after request.}); 这段C#代码是用于设…
阅读更多...
论文阅读：GamutMLP A Lightweight MLP for Color Loss Recovery

论文阅读：GamutMLP A Lightweight MLP for Color Loss Recovery

这篇文章是关于色彩恢复的一项工作&#xff0c;发表在 CVPR2023&#xff0c;其中之一的作者是 Michael S. Brown&#xff0c;这个老师是加拿大 York 大学的&#xff0c;也是 ISP 领域的大牛&#xff0c;现在好像也在三星研究院担任兼职&#xff0c;这个老师做了很多这种类似的工…
阅读更多...
C++数据结构与算法——双指针法

C++数据结构与算法——双指针法

C第二阶段——数据结构和算法&#xff0c;之前学过一点点数据结构&#xff0c;当时是基于Python来学习的&#xff0c;现在基于C查漏补缺&#xff0c;尤其是树的部分。这一部分计划一个月&#xff0c;主要利用代码随想录来学习&#xff0c;刷题使用力扣网站&#xff0c;不定时更…
阅读更多...
STM32——OLED菜单

STM32——OLED菜单

文章目录 一.补充二. 二级菜单代码 简介&#xff1a;首先在我的51 I2C里面有OLED详细讲解&#xff0c;本期代码从51OLED基础上移植过来的&#xff0c;可以先看完那篇文章&#xff0c;在看这个&#xff0c;然后按键我是用的定时器扫描不会堵塞程序,可以翻开我的文章有单独的定时…
阅读更多...
免费chatgpt使用

免费chatgpt使用

基本功能如下&#xff1a; https://go.aigcplus.cc/auth/register?inviteCode3HCULH2UD
阅读更多...
TensorRT转换onnx的Transpose算子遇到的奇怪问题

TensorRT转换onnx的Transpose算子遇到的奇怪问题

近来把一个模型导出为onnx并用onnx simplifier化简后转换为TensorRT engine遇到非常奇怪的问题&#xff0c;在我们的网络中有多个检测头时&#xff0c;转换出来的engine的推理效果是正常的&#xff0c;当网络中只有一个检测头时&#xff0c;转换出来的engine的推理效果奇差&…
阅读更多...
OpenCV-42 直方图均匀化

OpenCV-42 直方图均匀化

目录 一、直方图均匀化原理 二、直方图均匀化在OpenCV中的运用 一、直方图均匀化原理 直方图均匀化是通过拉伸像素强度的分布范围&#xff0c;使得在0~255灰阶上的分布更加均匀&#xff0c;提高图像的对比度。达到改善图像主管视觉效果的目的。对比度较低的图像适合使用直方…
阅读更多...
Flink理论—容错之状态

Flink理论—容错之状态

Flink理论—容错之状态 在 Flink 的框架中&#xff0c;进行有状态的计算是 Flink 最重要的特性之一。所谓的状态&#xff0c;其实指的是 Flink 程序的中间计算结果。Flink 支持了不同类型的状态&#xff0c;并且针对状态的持久化还提供了专门的机制和状态管理器。 Flink 使用…
阅读更多...
HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-互斥锁mux

HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核基础-互斥锁mux

目录 一、互斥锁基本概念二、互斥锁运行机制三、互斥锁开发流程四、互斥锁使用说明五、互斥锁接口六、代码分析&#xff08;待续...&#xff09; 一、互斥锁基本概念 互斥锁又称互斥型信号量&#xff0c;是一种特殊的二值性信号量&#xff0c;用于实现对共享资源的独占式处理。…
阅读更多...
Nginx （window）2024版 笔记 下载 安装 配置

Nginx （window）2024版 笔记 下载 安装 配置

前言 Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理&#xff08;Reverse Proxy&#xff09;服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。 反向代理方式是指以代理服务器来接受 internet 上的连接请求&#xff0c;然后将请求转发给内部网络上的服…
阅读更多...
C++ //练习 6.3 编写你自己的fact函数，上机检查是否正确。

C++ //练习 6.3 编写你自己的fact函数，上机检查是否正确。

C Primer&#xff08;第5版&#xff09; 练习 6.3 练习 6.3 编写你自己的fact函数&#xff0c;上机检查是否正确。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /********************************************************…
阅读更多...
数据结构~二叉树（基础知识）

数据结构~二叉树（基础知识）

上一篇博客我们对树有了初步了解与学习&#xff0c;这篇我将初步学习二叉树&#xff01;&#xff01;&#xff08;新年快乐&#xff01;&#xff09; 目录 二叉树 1、定义&#xff1a; 2、特点&#xff1a; 3、基本形态&#xff1a; 4、二叉树的种类&#xff1a; &…
阅读更多...
精工电联：定制精工线缆，赋能科技互联---致力于为客户提供卓越的连接线缆和连接器产品

精工电联：定制精工线缆，赋能科技互联---致力于为客户提供卓越的连接线缆和连接器产品

精工电联 “定制精工线缆 &#xff0c;赋能科技互联”&#xff0c;精工电联致力于为高科技产业提供全方位、多维度的集成线缆解决方案。凭借深厚的研发实力和丰富的行业经验&#xff0c;精工电联已经成功地在工控设备、医疗设备、人工智能、新能源领域、轨道交通和超声波设备等…
阅读更多...
数学建模【非线性规划】

数学建模【非线性规划】

一、非线性规划简介 通过分析问题判断是用线性规划还是非线性规划 线性规划&#xff1a;模型中所有的变量都是一次方非线性规划&#xff1a;模型中至少一个变量是非线性 非线性规划在形式上与线性规划非常类似&#xff0c;但在数学上求解却困难很多 线性规划有通用的求解准…
阅读更多...
实战 | 使用CNN和OpenCV实现数字识别项目(步骤 + 源码)

实战 | 使用CNN和OpenCV实现数字识别项目(步骤 + 源码)

导 读 本文主要介绍使用CNN和OpenCV实现数字识别项目，含详细步骤和源码。 前 言 在当今世界，深度学习和图像处理技术正在各个应用领域得到利用。在这篇博文中，我们将使用卷积神经网络 (CNN) 和 OpenCV 库完成数字识别项目。我们将逐步掌握该项目如何执行。 项目准…
阅读更多...
Git 初学

Git 初学

目录 一、需求的产生 二、版本控制系统理解 1. 认识版本控制系统 2. 版本控制系统分类 &#xff08;1&#xff09;集中式版本控制系统 缺点&#xff1a; &#xff08;2&#xff09;分布式版本控制系统 三、初识 git 四、git 的使用 例&#xff1a;将 “ OLED文件夹 ”…
阅读更多...
Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建

Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建

最近官网搭建选择了nuxtjs&#xff0c;由于框架更新了&#xff0c;其中语法也有很多变化&#xff0c;中间遇到了一些问题点做下总结。 nuxt3官方文档地址&#xff1a;https://nuxt.com/docs/getting-started/installation 安装 在安装Nuxt3之前&#xff0c;你需要保证你的nod…
阅读更多...
如何使用iptables或者firewalld配置Linux系统的防火墙策略

如何使用iptables或者firewalld配置Linux系统的防火墙策略

在网络安全中&#xff0c;防火墙是一种关键的安全设备&#xff0c;用于保护计算机网络免受恶意攻击和未经授权的访问。在Linux系统中&#xff0c;我们可以使用iptables或者firewalld来配置防火墙策略。本文将介绍如何使用这两种工具来配置Linux系统的防火墙策略&#xff0c;包括…
阅读更多...
java8-重构、测试、调试

java8-重构、测试、调试

8.1.1 改善代码的可读性 改善代码的可读性到底意味着什么?我们很难定义什么是好的可读性&#xff0c;因为这可能非常主观。通常的理解是&#xff0c;“别人理解这段代码的难易程度”。改善可读性意味着你要确保你的代码能非常容易地被包括自己在内的所有人理解和维护。为了确保…
阅读更多...
php基础学习之函数

php基础学习之函数

基本概念 是一种语法结构&#xff0c;将实现某一个功能的代码块封装到一个结构中&#xff0c;从而实现代码的重复利用 php函数的定义语法 &#xff08;与C/Java很类似&#xff0c;区别在于没有数据类型&#xff0c;因为php是弱类型语言&#xff09; function 函数名(参数){ //…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023