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.hqwc.cn/news/473372.html

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

相关文章

深入解析Mybatis-Plus框架：简化Java持久层开发(二)

深入解析Mybatis-Plus框架：简化Java持久层开发(二)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节开始从实际的应用场景&#xff0c;来讲解Mybatis-Plus常用的一些操作&#xff0c;根据业务场景来进行增删改查的功能&#xff0c;首先先搭建一个项目…
阅读更多...
codeforces 1500分

codeforces 1500分

文章目录 1.[C. Partitioning the Array](https://codeforces.com/contest/1920/problem/C)2.[F. Greetings](https://codeforces.com/contest/1915/problem/F)3.[B. Plus and Multiply](https://codeforces.com/problemset/problem/1542/B)4.[B. Codeforces Subsequences](htt…
阅读更多...
网络原理-TCP/IP(7)

网络原理-TCP/IP(7)

目录 网络层 路由选择 数据链路层 认识以太网 以太网帧格式 认识MAC地址 对比理解MAC地址和IP地址 认识MTU ARP协议 ARP协议的作用 ARP协议工作流程 重要应用层协议DNS(Domain Name System) DNS背景 NAT技术 NAT IP转换过程 NAPT NAT技术的优缺点 网络层 路由…
阅读更多...
Java学习第十六节之创建对象内存分析和小结类与对象

Java学习第十六节之创建对象内存分析和小结类与对象

创建对象内存分析 小结类与对象 package oop;//一个项目应该只存在一个main方法 public class Application {public static void main(String[] args) {/*1.类与对象类是一个模版&#xff1a;抽象对象是一个具体的实例2.方法定义&#xff0c;调用&#xff01;3.对应的引用引用…
阅读更多...
036-安全开发-JavaEE应用第三方组件Log4j日志FastJson序列化JNDI注入

036-安全开发-JavaEE应用第三方组件Log4j日志FastJson序列化JNDI注入

036-安全开发-JavaEE应用&第三方组件&Log4j日志&FastJson序列化&JNDI注入 #知识点&#xff1a; 1、JavaEE-组件安全-Log4j 2、JavaEE-组件安全-Fastjson 3、JavaEE-基本了解-JNDI-API 演示案例&#xff1a; ➢Java-三方组件-Log4J&JNDI ➢Java-三方组件-Fa…
阅读更多...
各类电纸书使用体验

各类电纸书使用体验

对移动阅读一直有着强烈的愿望&#xff0c;想要一个易于携带&#xff0c;又能看着比较大气的电子阅读器&#xff0c;这是一个矛盾...所以现在用着海信Hi Reader Pro&#xff0c;还想再寻找一个合适的家用阅读器&#xff0c;对自己用过的阅读器总结一下&#xff0c;给大家做个参…
阅读更多...
leetcode刷题（罗马数字转数字）

leetcode刷题（罗马数字转数字）

1.题目描述 2.解题思路 这时候已经给出了字母对应的数字&#xff0c;我们只需要声明一个字典&#xff0c;将罗马数字和数字之间的对应关系声明即可。其中可能涉及到会出现两个连续的罗马字母代表一个数字&#xff0c;这时候我们需要判断遍历的字符和将要遍历的下一个字符是否存…
阅读更多...
动态规划---＞背包问题理论基础（二维dp）

动态规划---＞背包问题理论基础（二维dp）

01背包&#xff1a;n个物品每种都有一个 完全背包&#xff1a;n个物品每种都有相同数量个 多重背包&#xff1a;n个物品每种都有不同数量个 背包暴力解法&#xff1a;每种物品只有两种状态&#xff0c;可以枚举采用回溯算法试一试 题目&#xff1a;三种物品的编号&#xff…
阅读更多...
1.逆向基础

1.逆向基础

文章目录 一、前言二、什么是逆向&#xff1f;三、软件逆向四、逆向分析技术五、文本字符六、Windows系统1.Win API2.WOW643.Windows消息机制4.虚拟内存 一、前言 原文以及后续文章可点击查看&#xff1a;逆向基础 逆向真的是一个很宏大的话题&#xff0c;而且大多数都是相当…
阅读更多...
Linux学习——静态库与动态库的打包

Linux学习——静态库与动态库的打包

目录 ​编辑 一&#xff0c;动静态库介绍 1&#xff0c;动静态库的特点 二&#xff0c;静态库的打包 计算器示例 编译&#xff1a; 1&#xff0c;直接编译 2&#xff0c;打包 三&#xff0c;动态库打包 计算器示例&#xff1a;同上 编译&#xff1a; 1&#xff0c;直…
阅读更多...
大模型计算量纲

大模型计算量纲

大模型计算量纲 1. 模型参数量(llama 13B为例) {"architectures": ["LLaMAForCausalLM"],"bos_token_id": 0,"eos_token_id": 1,"hidden_act": "silu","hidden_size": 5120,"intermediate_size&…
阅读更多...
图像处理之《生成式隐写研究》论文阅读

图像处理之《生成式隐写研究》论文阅读

这是一篇关于生成式隐写的中文综述文章 一、文章摘要 隐写术通常将秘密信息以不可见的形式隐藏到载体中&#xff0c;从而通过传递含密载体实现隐蔽通信。嵌入式隐写方案通过修改载体将秘密信息嵌入其中&#xff0c;但会不可避免地改变载体的统计特性&#xff0c;因此难以抵抗…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023