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

news/发布时间2024/5/19 14:41:32

目录

一、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.bcls.cn/TsXi/1189.shtml

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

相关文章

Qt程序设计-中英文输入法软键盘实现

Qt程序设计-中英文输入法软键盘实现

本文讲解Qt中英文输入法软键盘实现。 实现目标 中英文切换、大小写切换、特殊字符切换、 使用谷歌中文字库txt文档。 在QWidget窗体上实现，可视化编写软键盘。 实现过程 准备工作：下载谷歌中文字库，按键的图片 创建QWidget项目，在主窗体上添加一个按钮，用于弹出软键…
阅读更多...
【RT-DETR有效改进】 多维度注意力机制 | TripletAttention三重立体特征选择模块

【RT-DETR有效改进】 多维度注意力机制 | TripletAttention三重立体特征选择模块

一、本文介绍 本文给大家带来的改进是Triplet Attention三重注意力机制。这个机制&#xff0c;它通过三个不同的视角来分析输入的数据&#xff0c;就好比三个人从不同的角度来观察同一幅画&#xff0c;然后共同决定哪些部分最值得注意。三重注意力机制的主要思想是在网络中引入…
阅读更多...
2.Eclipse里面配置Maven及创建Maven项目

2.Eclipse里面配置Maven及创建Maven项目

1.配置Eclipse的Maven环境. eclipse4.0以上已经安装了Maven插件&#xff0c;无需额外再次安装Maven插件。除非你的Eclipse版本很低&#xff0c;就需要手动安装。那么怎么看我们的 Eclipse里面有没有安装 Maven插件呢&#xff1f;打开如下菜单&#xff1a;Window--->Preferen…
阅读更多...
Maven高级(一)

Maven高级(一)

文章目录 Maven高级&#xff08;一&#xff09;1. 分模块设计与开发1.1 介绍1.2 实践1.2.1 分析1.2.2 实现 1.3 总结 2. 继承与聚合2.1 继承2.1.1 继承关系2.1.1.1 思路分析2.1.1.2 实现 2.1.2 版本锁定2.1.2.1 场景2.1.2.2 介绍2.1.2.3 实现2.1.2.4 属性配置 2.2 聚合2.2.1 介…
阅读更多...
从底层理解MySQL-字符类型

从底层理解MySQL-字符类型

目录 VARCHAR和CHAR VARCHAR CHAR 存储的长度超限 CHAR和VARCHAR的区别&#xff1a; BLOB和TEXT MySQL中除了数值类型外&#xff0c;另一个用的比较多的就是字符类型了。字符类型有很多不同种类&#xff1a;VARCHAR,CHAR,BLOB,TEXT VARCHAR和CHAR VARCHAR VARCHAR是变…
阅读更多...
Github 2024-02-20开源项目日报 Top10

Github 2024-02-20开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-20统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目6非开发语言项目2TypeScript项目1Rust项目1 命令行的艺术 创建周期&#xff1a;3198 天Star数量&…
阅读更多...
【无标题】

【无标题】

#include<myhead.h>int main(int argc, const char *argv[]) {//定义两个文件句柄int srcfp-1;int destfp-1;//创建子进程pid_t pidfork();//在父进程中打开和复制一半的文件int len0;if(pid>0){//打开源文件if((srcfpopen("./test.txt",O_RDONLY))-1){perr…
阅读更多...
ClickHouse快速上手

ClickHouse快速上手

简介 ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS) 官网(https://clickhouse.com/docs/zh)给出的定义&#xff0c;其实没看懂 特性 ClickHouse支持一种基于SQL的声明式查询语言&#xff0c;它在许多情况下与ANSI SQL标准相同。使用时和MySQL有点相似&#…
阅读更多...
weblog项目开发记录--SpringBoot后端工程骨架

weblog项目开发记录--SpringBoot后端工程骨架

知识点查漏补缺 跟着犬小哈做项目实战时发现好多知识点都忘了&#xff0c;还有一些小的知识点可能之前没学过&#xff0c;记录下&#xff01;顺带整理下开发流程。 完整项目学习见犬小哈实战专栏 SpringBoot后端工程骨架 搭建好的工程骨架中实现了很多基础功能&#xff0c;…
阅读更多...
YOLO-World：实时开放词汇目标检测

YOLO-World：实时开放词汇目标检测

paper&#xff1a;https://arxiv.org/pdf/2401.17270.pdf Github&#xff1a;GitHub - AILab-CVC/YOLO-World: Real-Time Open-Vocabulary Object Detection online demo&#xff1a;https://huggingface.co/spaces/stevengrove/YOLO-World 目录 0. 摘要 1. 引言 2. 相关工…
阅读更多...
git常用命令

git常用命令

1.配置用户信息 $ git config --global user.name "runoob" $ git config --global user.email testrunoob.com 2.git 拉取代码 $ git clone git://github.com/schacon/grit.git 3.git 提交代码 $ git remote -v //查看当前连接地址 $ git add . //命令可将该…
阅读更多...
【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Thu, 18 Jan 2024 Totally 43 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers CognitiveDog: Large Multimodal Model Based System to Translate Vision and Language into Action of Quadruped Robot Aut…
阅读更多...
探究二维码技术：连接现实与数字世界的桥梁

探究二维码技术：连接现实与数字世界的桥梁

title: 探究二维码技术&#xff1a;连接现实与数字世界的桥梁 date: 2024/2/19 13:15:36 updated: 2024/2/19 13:15:36 tags: 二维码技术数据编码纠错算法图像处理商业应用安全验证实时交互 引言&#xff1a; 二维码已经成为现代社会中广泛应用的一种技术工具。它不仅在商业领…
阅读更多...
Unity—JSON

Unity—JSON

每日一句&#xff1a;手简素中&#xff0c;感生活恬淡&#xff0c;心有所期&#xff0c;忙而不茫 目录 服务器 常见的服务器语言 Unity的开发语言 JSON 功能&#xff1a; JSON最简单的格式 JSON工具 支持的数据结构&#xff08;C#对于JSON&#xff09; 字符含义 JSON…
阅读更多...
2023 年，我患上了 AI 焦虑症！

2023 年，我患上了 AI 焦虑症！

【作者有话说】2023 年对我来说是神奇的一年&#xff0c;我意外地从一个程序员变成了一个 AI 资讯届的“网红”&#xff0c;到年底时我在 X 平台的阅读量超过 1 亿&#xff0c;微博上的阅读量则超过 10 亿&#xff0c;很多人通过我的微博或者 X 了解最新的 AI 资讯、教程和 Pro…
阅读更多...
红队打靶练习:HACK ME PLEASE: 1

红队打靶练习:HACK ME PLEASE: 1

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.61.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.61.2 00:50:56:f0:df:20 …
阅读更多...
docker （四）-docker网络

docker （四）-docker网络

默认网络 docker会自动创建三个网络&#xff0c;bridge,host,none bridge桥接网络 如果不指定&#xff0c;新创建的容器默认将连接到bridge网络。 默认情况下&#xff0c;使用bridge网络&#xff0c;宿主机可以ping通容器ip&#xff0c;容器中也能ping通宿主机。 容器之间只…
阅读更多...
opencv计算机视觉

opencv计算机视觉

树莓派主机的无键盘解决 进入控制面板&#xff0c;更改适配器设置&#xff0c;WIFI属性&#xff0c;勾选 1.将网线两头分别接入树莓派和笔记本的网线接口 2.在无线连接属性那里勾选允许其他用户连接 3.运行cmd使用arp -a查看树莓派ip地址&#xff0c;或者使用ipscanner查看 cmd…
阅读更多...
前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

前言 在项目开发中&#xff0c;我们经常会使用一些工具函数&#xff0c;也经常会用到例如loadsh等工具库&#xff0c;但是这些工具库的体积往往比较大&#xff0c;如果项目本身已经引入了这些工具库&#xff0c;那么我们就没有必要再引入一次&#xff0c;所以我们需要自己封装…
阅读更多...
鸿蒙系统进一步学习（一）：学习资料总结，少走弯路

鸿蒙系统进一步学习（一）：学习资料总结，少走弯路

随着鸿蒙Next的计划越来越近&#xff0c;笔者之前的鸿蒙系统扫盲系列中&#xff0c;有很多朋友给我留言&#xff0c;不同的角度的问了一些问题&#xff0c;我明显感觉到一点&#xff0c;那就是许多人参与鸿蒙开发&#xff0c;但是又不知道从哪里下手&#xff0c;因为资料太多&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 尧图建网站 广利置业