微信小程序学习笔记(4)

文章目录

  • 1、< template >< / template >
  • 2、样式导入
    • i、wxml
    • ii、wxss
  • 3、flex布局
    • i、容器属性
    • ii、项目属性

1、< template >< / template >

模板可以重复调用

首先要定义一个模板:

<template name="test"><view>{{username}}</view><view>{{password}}</view>
</template>
<!-- 这里定义了一个模板名字为 test 的模板 ,里面包含了两个 view 组件-->

然后才能应用该模板:

<template is="test" data="{{username:'admin',password:'123'}}">
</template>
<!-- 使用 is 引用所要使用的模板名字,同时,使用 data 更新模板中的变量的值 -->
<!-- 另外,也可以在 Page() 中定义 data 的其中一个变量值,以一个结构体的值为例子:Page({data: {stu:{username:'admin',password:'123'}}
})然后,在引用该模板的时候可以使用<template is="test" data="{{...stu}}">
</template>来给变量赋值其中 “...stu” 表示将 名字为 stu 的变量展开引用-->

2、样式导入

i、wxml

提供了 import 和 include 两种引用方式

<import src="相对路径" />
<include src="相对路径" />

import 有作用域的概念,比如,在一个 wxml(记为 A) 文件中引用了另一个 wxml(记为B),同时,在 B 中引用了其他的 wxml (记为C)文件,那么,在 A 中,只能引用 B 中的 内容,而不会引用 C 中,使用 import 导入的内容

避免了多个页面相互引用,陷入逻辑错误

include 只会引入 除了 template style script 及其内容,相当于吧代码 copy 过来

  • <import>:适用于导入通用的模板、组件等,提高代码的复用性和可维护性。
  • <include>:适用于将某个文件中的特定部分插入到当前页面中,通常用于模块化开发。

ii、wxss

尺寸单位:rpx根据指定的屏幕自适应

样式导入:

@import "相对路径";

3、flex布局

在flex布局中,用于包含内容的组件成为容器,容器内部的组件成为项目,容器允许包含嵌套

坐标轴是以容器的左上角为原点,自左向右,自上向下

也可以通过flex-direction:column将主轴改变为:自上向下,自左向右

i、容器属性

flex-direction:

flex-direction: row(默认) | row-reverse | column | column-reverse
/*
row 坐标轴是以容器的左上角为原点,自左向右,自上向下
row-reverse  坐标轴是以容器的左上角为原点,自右向左,自上向下
column 自上向下,自左向右
column-reverse 自下向上,自左向右

flex-wrap:

flex-wrap: nowrap(默认) | wrap | wrap-reverse
/*nowrap 不换行,如果单行内容过多,项目宽度会被压缩
wrap 当容器单行容不下所有项目时,允许换行
wrap-reverse 与 wrap 相同,只不过,换行方向为 wrap 的反方向

在这里插入图片描述

justify-content:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ;
  • flex-start(默认值):左对齐,没有空隙
  • flex-end:右对齐,没有空隙
  • center: 居中,没有空隙
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:项目之间的间隔比 开始和末尾 与边框的间隔大一倍,开始 和末尾与边框相同
  • space-evenly: 开始和末尾,与项目之间的间隔相同

还有 align-items(项目在行中的对齐方式)

align-content(项目在非主轴的对齐方式)

ii、项目属性

order:

.item{order: 0(默认);/* 一个整数,表示排列的位置,数值越小越靠前  */
}

flex-shrink:(收缩因子)

.item{flex-shrink: 1(默认);/* 一个非负数 ,也称为 收缩因子*/
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小

计算公式:最终长度= 原长 x (1 - 溢出长度 x 收缩因子 / 压缩权重 )向下取整

上述公式只适用于 所有收缩因子的总和大于 1 的情况

压缩权重 = 长度1 x 收缩因子1 + 长度2 x 收缩因子2 + …

长度指的是主轴上的长度

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

.item {flex-grow: 0; /* 非负数 */
}

最终长度 = 原长度 + 扩张单位 x 扩张因子 (向下取整)

扩张单位 = 剩余空间 / 扩张因子的总和

长度指的是主轴上的长度

flex-basis:根据主轴的方向代替,主轴上的宽或者高

默认 auto(其优先级比数值低)如果,不是 auto 而是数字,则优先级大于 项目的宽或者高

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

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

相关文章

AbstractMap和SimpleEntry

一、AbstractMap 位置&#xff1a;在java.util包 二、SimpleEntry 1、概述 继承了Map中的内部接口Entry<K,V> SimpleEntry<K,V>不仅继承了Map.Entry<K,V>&#xff0c;还继承了序列化的接口 2、构造方法 方法说明SimpleEntry(K key,V value)通过键值对初…

RabbitMQ-工作模式(Publish模式Routing模式)

文章目录 发布/订阅&#xff08;Publish/Subscribe&#xff09;交换机临时队列绑定总体代码示例 路由&#xff08;Routing&#xff09;绑定直连交换机多重绑定发送日志订阅总体代码示例 更多相关内容可查看 发布/订阅&#xff08;Publish/Subscribe&#xff09; 构建一个简单的…

vue antdesgin table 动态表头动态数据示例

以下是一个基于 Vue 和 Ant Design Vue 的示例&#xff0c;可以动态生成表格的表头和数据&#xff1a; <template><div><a-button click"addColumn">添加列</a-button><a-table :columns"columns" :dataSource"dataSource…

HC-05蓝牙模块配置连接和使用

文章目录 1. 前期准备 2. 进入AT模式 3. 电脑串口配置 4. 配置过程 5. 主从机蓝牙连接 6. 蓝牙模块HC-05和电脑连接 1. 前期准备 首先需要准备一个USB转TTL连接器&#xff0c;电脑安装一个串口助手&#xff0c;然后按照下面的连接方式将其相连。 VCCVCCGNDGNDRXDTXDTXD…

ICLR24大模型提示(8) | 退一步思考:在大型语言模型中通过抽象引发推理

【摘要】我们提出了一种简单的提示技术&#xff0c;即后退提示法&#xff0c;它使 LLM 能够进行抽象&#xff0c;从包含特定细节的实例中得出高级概念和第一原理。通过使用概念和原理来指导推理&#xff0c;LLM 显著提高了遵循正确推理路径解决问题的能力。我们使用 PaLM-2L、G…

Facebook企业户 | Facebook公共主页经营

Facebook作为社交媒体巨头&#xff0c;拥有庞大的用户基数&#xff0c;因此&#xff0c;有效经营公共主页是获取持续流量、提升客户信任度和粘性、促进产品或服务销售与转化的关键。要优化Facebook主页&#xff0c;关注以下几点&#xff1a; 1、参与度是关键指标&#xff1a;因…

Python YOLOv5 7.0 基于深度学习的口罩检测识别系统

目录 1&#xff0c;演示视频和资源下载 1.1 演示视频 1.2 资源下载 2&#xff0c;数据集 3&#xff0c;代码 3.1 带 PyQt5 UI 的检测程序&#xff0c;基于YOLOv5 7.0 3.1.1 根据训练结果进行检测 3.1.2 自动保存每张图片/每帧的检测结果 3.1.3 筛选查看每张图片/每帧检…

Linux---sudo命令

文章目录 目录 文章目录 一.sudo命令简介 二.sudo 命令的特点 三.sudo 相关文件 四.sudo 命令授权配置 一.sudo命令简介 sudo 命令全称“SuperUser Do”&#xff0c;是Linux系统中的一个命令能够使普通用户以超级用户身份去执行某些命令。 二.sudo 命令的特点 sudo能够授权…

HC05蓝牙模块与笔记本蓝牙连接

文章目录 1. 电脑和蓝牙模块连接 2. 串口软件调试 1. 电脑和蓝牙模块连接 HC05支持SPP协议&#xff0c;使用PC主机自带蓝牙&#xff0c;或者笔记本加蓝牙适配器。与HC05连接后&#xff0c;可在电脑端虚拟出串口&#xff0c;这样上位机软件就可以像操作串口一样与HC05通信。对…

[ROS 系列学习教程] 建模与仿真 - 使用 Arbotix 控制机器人

ROS 系列学习教程(总目录) 本文目录 一、Arbotix 简介二、安装Arbotix三、配置Arbotix控制器四、配置launch启动文件五、数据交互接口六、在rviz中仿真控制机器人6.1 直接发topic控制6.2 使用键盘控制6.3 编写代码控制机器人移动 前面讲了机器人的建模&#xff0c;是静态的&…

二进制中1的个数-java

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、二进制中1的个数 二、算法思路 1.将一个整数转化成二进制形式 2.查询一个数的二进制数中的第k位是多少 3.lowbit(x)操作 三、代码如下 1.代码如下&…

ChatTTS 文字生成语言本地模型部署

ChatTTS部署 官方信息 [ChatTTS首页](https://chattts.com/)搭建步骤 1、下载源码 git clone https://github.com/2noise/ChatTTS.git 2、按照环境 pip install torch ChatTTS pip install -r requirements.txt 3、下载模型 git clone https://www.modelscope.cn/pzc163/ch…

[Vue3:axios]:实现实现登陆页面前后端请求,并用Vite解决跨域问题

文章目录 一&#xff1a;前置依赖查看依赖安装 axios&#xff1a;npm install axios 二&#xff1a;配置文件&#xff1a;创建一个用于全局使用的axios实例&#xff0c;并在main.js或main.ts文件中将其配置为全局属性。根目录mainjs文件引入axios 三&#xff1a;登录页面发送登…

Polar Web【中等】xxe

Polar Web【中等】xxe Contents Polar Web【中等】xxe思路&探索EXP运行&总结 思路&探索 如题目所示&#xff0c;此题考查XXE漏洞&#xff0c;具体细节需要逐步深挖 打开站点&#xff0c;提示了flag所在的文件&#xff0c;点击按钮&#xff0c;可见php的配置信息&am…

一款免费文件夹同步工具,旨在帮助用户在不同磁盘或文件夹间进行文件和目录的复制、移动和同步工作

一、简介 1、一款免费文件夹同步工具&#xff0c;旨在帮助用户在不同磁盘或文件夹间进行文件和目录的复制、移动和同步工作。这款工具因其简单易用、高度可定制化的特点&#xff0c;受到了广大用户的青睐。SyncToy支持多种同步模式&#xff0c;包括镜像同步、单向同步以及增量同…

Mysql使用中的性能优化——索引数对INSERT性能的影响

表的索引可以给数据检索提升效率&#xff0c;但是也给表的增删改操作带来代价。本文我们将关注&#xff0c;索引数量对INSERT操作的影响。 结论 索引数的新增会造成INSERT操作效率下降&#xff0c;约每增一个索引会降低10%效率。 实验数据 可以看到0个索引的效率是7个索引效…

Java Web学习笔记21——前后端分离开发

前后端混合开发&#xff1a; 沟通成本比较高。 分工不明确。 不便管理&#xff0c;不便于后期的维护和拓展。 前后端分离开发&#xff1a; 当前主流的开发模式&#xff1a;前后端分离开发&#xff1a; 接口文档&#xff1a; 接口并不是interface。 接口指的是业务功能。 …

Wireshark自定义Lua插件

背景&#xff1a; 常见的抓包工具有tcpdump和wireshark&#xff0c;二者可基于网卡进行抓包&#xff1a;tcpdump用于Linux环境抓包&#xff0c;而wireshark用于windows环境。抓包后需借助包分析工具对数据进行解析&#xff0c;将不可读的二进制数转换为可读的数据结构。 wires…

element-plus的el-text组件(文本组件)的介绍和使用

el-text&#xff08;适合文本操作的组件&#xff09; 设置文本type,如default,primary,success,info,warning,danger超出容器尺寸自动省略&#xff0c;tuncated属性设置size属性控制文本大小&#xff0c;有large,default,small设置tag属性&#xff0c;值为html5标签名&#xf…

Nagios的安装和使用

*实验* *nagios安装和使用* Nagios 是一个监视系统运行状态和网络信息的监视系统。Nagios 能监视所指定的本地或远程主机以及服务&#xff0c;同时提供异常通知功能等. Nagios 可运行在 Linux/Unix 平台之上&#xff0c;同时提供一个可选的基于浏览器的 WEB 界面以方便系统管…