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.mfbz.cn/a/391577.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

h5和微信小程序实现拍照功能（其中h5暂时无法调用闪光灯）

h5和微信小程序实现拍照功能（其中h5暂时无法调用闪光灯）

代码如下 <template><view class"camera"><!-- #ifdef MP --><camera ref"myCamera" id"myCamera" device-position"back" :flash"flash" error"error" style"display: block;"&…
阅读更多...
shell编程：求稀疏数组中元素的和(下标不连续)

shell编程：求稀疏数组中元素的和(下标不连续)

#!/bin/basharr([2]3 [5]2 [6]2 [9]1)for i in "${!arr[]}" dosum$((sumarr[i])) doneecho $sumBash 脚本中&#xff0c;* 和 符号在数组上下文中有不同的用途。当使用它们来遍历数组时&#xff0c;必须了解它们之间的区别。 * (无前置感叹号 !)&#xff1a; 在索引…
阅读更多...
数据库第五次实验

数据库第五次实验

目录 1 创建数据表 2 创建多个用户 ​​​​​​​3 用户的授权 ​​​​​​​4 用户权限的回收 ​​​​​​​5 角色的创建与授权 ​​​​​​​6 回收角色的权利 ​​​​​​​7 审计的设置 1 创建数据表 SQL语句&#xff1a; use experimentfive; create table…
阅读更多...
MySQL 基础知识（九）之视图

MySQL 基础知识（九）之视图

目录 1 视图的介绍 2 视图算法 3 创建视图 4 查看视图结构 5 修改视图 6 删除视图 7 参考文档 1 视图的介绍 视图是一张并不存储数据的虚拟表&#xff0c;其本质是根据 SQL 语句动态查询数据库中的数据。数据库中只存放了视图的定义&#xff0c;通过 SQL 语句使用视图时…
阅读更多...
HarmonyOS—@State装饰器：组件内状态

HarmonyOS—@State装饰器：组件内状态

State装饰的变量&#xff0c;或称为状态变量&#xff0c;一旦变量拥有了状态属性&#xff0c;就和自定义组件的渲染绑定起来。当状态改变时&#xff0c;UI会发生对应的渲染改变。 在状态变量相关装饰器中&#xff0c;State是最基础的&#xff0c;使变量拥有状态属性的装饰器&a…
阅读更多...
C#学习(十三)——多线程与异步

C#学习(十三)——多线程与异步

一、什么是线程 程序执行的最小单元 一次页面的渲染、一次点击事件的触发、一次数据库的访问、一次登录操作都可以看作是一个一个的进程 在一个进程中同时启用多个线程并行操作&#xff0c;就叫做多线程 由CPU来自动处理 线程有运行、阻塞、就绪三态 代码示例&#xff1a; cl…
阅读更多...
AI：131- 法律文件图像中的隐含信息挖掘与敲诈勒索检测

AI：131- 法律文件图像中的隐含信息挖掘与敲诈勒索检测

🚀点击这里跳转到本专栏，可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航！ 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码，详细讲解供…
阅读更多...
[AIGC ~ coze] Kafka 消费者——从源码角度深入理解

[AIGC ~ coze] Kafka 消费者——从源码角度深入理解

Kafka 消费者——从源码角度深入理解 一、引言 Kafka 是一个分布式的流处理平台&#xff0c;广泛应用于大规模数据处理和实时数据管道。在 Kafka 生态系统中&#xff0c;消费者扮演着至关重要的角色&#xff0c;它们从 Kafka 主题中读取数据并进行处理。本文将深入探讨 Kafka …
阅读更多...
七天入门大模型 ：大模型LLM 训练理论和实战最强总结！

七天入门大模型 ：大模型LLM 训练理论和实战最强总结！

本文对于想入门大模型、面试大模型岗位、大模型实具有很强的指导意义。喜欢记得收藏、关注、点赞 文章目录 技术交流群用通俗易懂方式讲解系列总览介绍预训练范式如何确定自己的模型需要做什么训练&#xff1f;模型推理的一般过程PyTorch 框架设备PyTorch基本训练代码范例Trans…
阅读更多...
自动化测试：电商管理系统元素定位练习​

自动化测试：电商管理系统元素定位练习​

本次专题我们来说一下 Python中Unittest 框架的使用及如何通过HTMLTestRunner实现自动化测试报告的自动生成。案例中的代码我们仍旧使用课堂学习中部署的“电商管理系统”来实现。本次练习包括以下几个操作&#xff1a; l 测试用例整体结构设计 l 测试用例的实现 l 测试套的…
阅读更多...
linux kernel 内存踩踏之KASAN_SW_TAGS（二）

linux kernel 内存踩踏之KASAN_SW_TAGS（二）

一、背景 linux kernel 内存踩踏之KASAN&#xff08;一&#xff09;_kasan版本跟hasan版本区别-CSDN博客 上一篇简单介绍了标准版本的KASAN使用方法和实现&#xff0c;这里将介绍KASAN_SW_TAGS和KASAN_HW_TAGS 的使用和背后基本原理&#xff0c;下图是三种方式的对比&#x…
阅读更多...
线索化二叉树（先序，中序，后序）+线索化二叉树的遍历【java详解】

线索化二叉树（先序，中序，后序）+线索化二叉树的遍历【java详解】

目录 线索化二叉树的基本介绍&#xff1a; 举个栗子&#xff1a; 二叉树的中序线索化&#xff1a; 创建HeroNode类&#xff0c;表示节点信息&#xff1a; 编写中序线索化方法代码&#xff1a; 中序线索化遍历代码&#xff1a; 测试代码&#xff1a; 测试结果&#xff1a…
阅读更多...
一起学量化之RSI指标

一起学量化之RSI指标

RSI指标 Relative Strength Index，相对强弱指数（RSI），是一个衡量资产过度买入或过度卖出状态的技术指标。 1. RSI的基本概念 当RSI超过70时，通常被认为是超买状态。当RSI低于30时，通常被认为是超卖状态。RSI超过80，被认为是严重超买状态。RSI低于20，被认为是严重超卖状…
阅读更多...
微波炉维修笔记

微波炉维修笔记

微波主要是靠2.45GHz 左右的微波(12.2cm 波长)加热水分子实现食物加热 所有不要使用金属器皿进行加热&#xff0c;要么因为电磁屏蔽&#xff0c;起不到加热效果&#xff0c;要么火光四射 微波炉基本组成 借鉴姜师傅的视频 碰到不加热其它都正常的问题 1.检查高压电容 使用万…
阅读更多...
第10章 JDBC

第10章 JDBC

10.1 什么是JDBC JDBC的全称是Java数据库连接&#xff08;Java Database Connectivity&#xff09;&#xff0c;它是一套用于执行SQL语句的Java API。应用程序可通过这套API连接到关系型数据库&#xff0c;并使用SQL语句完成对数据库中数据的新增、删除、修改和查询等操作。 …
阅读更多...
Trie 字典树的两种实现方式

Trie 字典树的两种实现方式

Trie&#xff0c;又称字典树、单词查找树或键树&#xff0c;是一种树形结构&#xff0c;是一种哈希树的变种。典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串&#xff09;&#xff0c;所以经常被搜索引擎系统用于文本词频统计。它的优点是…
阅读更多...
github Two-factor authentication (2FA)is required for your GitHub account

github Two-factor authentication (2FA)is required for your GitHub account

问题 github 2FA认证 详细问题 笔者使用GitKraken&#xff0c;使用github登录&#xff0c;github要去 Two-factor authentication (2FA)is required for your GitHub account&#xff0c;即进行2FA认证 解决方案 解决方案一、 微信 → \rightarrow →搜索腾讯身份验证器…
阅读更多...
内存块与内存池

内存块与内存池

&#xff08;1&#xff09;在运行过程中&#xff0c;MemoryPool内存池可能会有多个用来满足内存申请请求的内存块&#xff0c;这些内存块是从进程堆中开辟的一个较大的连续内存区域&#xff0c;它由一个MemoryBlock结构体和多个可供分配的内存单元组成&#xff0c;所有内存块组…
阅读更多...
java 培训班预定管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

java 培训班预定管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 培训班预定管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xf…
阅读更多...
java 宠物医院系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

java 宠物医院系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

一、源码特点 java 宠物医院系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…
阅读更多...
最新文章

Copyright @ 2022~2023

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