当前位置: 首页 > news >正文

微信小程序——常用组件的属性介绍

常用的组件内容标签

  1. text
    1. 文本组件
    2. 类似于HTML中的span标签,是一个行内元素
  2. rich-text
    1. 富文本标签
    2. 支持把HTML字符串渲染为WXML结构

text标签的基本使用

  1. 通过text组件的selectable属性,实现长按选中文本内容的效果。只有text标签支持长按选中效果,其他的组件是不支持的

结构内容代码:

<view class="text-view">

  支持长按选中手机号

  <text selectable>176xxxxxxxx</text>

</view>

样式内容代码:

.text-view{

  margin-top: 15px;

  margin-left: 15px;

}

上面的代码的实现效果,就是手机号的部分可以长按选中,但是文字的部分是无法长按选中的。

rich-text组件的基本使用

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构

结构内容代码:

<view class="text-view">

  支持长按选中手机号

  <text selectable>176xxxxxxxx</text>

  <rich-text nodes="<h1>这是HTML的一级标题<h1>"/>

</view>

样式内容代码:

.text-view{

  margin-top: 15px;

  margin-left: 15px;

}

上面的效果,是将rich-text标签中的nodes属性的HTML标签渲染为微信的样式并将内容进行展示。

这个标签一般适用于接收在电脑的服务端返回的HTML标签文本的时候,将其转换成微信小程序的样式在小程序中进行展示时使用。

其他常用组件

  1. button
    1. 按钮组件
    2. 功能比HTML中的button按钮丰富
    3. 通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户权限,获取用户信息等)
  2. image
    1. 图片组件
    2. image组件默认宽度越300px,高度越240px
  3. navigator(后面课程会专门讲解)
    1. 页面导航组件
    2. 类似于HTML中的a连接标签

button按钮的基本使用

结构内容代码:

<view class="botton_view">

  <!-- 默认按钮 -->

  <button>默认按钮</button>

  <!-- 警告按钮 -->

  <button type="warn">警告按钮</button>

  <!-- 确认按钮 -->

  <button type="primary">确认按钮</button>

  <!-- 迷你按钮 迷你按钮是行内元素并且并不独占一行-->

  <button size="mini" type="primary">迷你确认按钮</button>

  <button size="mini" type="warn">迷你警告按钮</button>

  <button size="mini">迷你默认按钮</button>

  <!-- 镂空按钮 -->

  <button plain type="primary">镂空确认按钮</button>

  <button plain type="warn">镂空警告按钮</button>

  <button plain >镂空默认按钮</button>

</view>

样式内容代码:

.botton_view{

  margin-top: 15px;

  margin-left: 15px;

}

.botton_view button{

  margin-top: 10px;

}

在使用button组件的时候,可以使用type属性去指定按钮的样式,size属性指定按钮的大小,以及通过添加plain属性去使按钮出现镂空样式。

image组件的基本使用

结构内容代码:

<view class="img_view">

  <image src="./image/幼儿园-LOGO.jpg" mode="widthFix"/>

</view>

样式内容代码:

.img_view{

  border: 1px solid red;

  margin: 0 auto;

  text-align: center;

  width: 100px;

  height: 100px;

}

.img_view image{

  width: 100px;

  height: 100px;

}

图片标签的使用与HTML中的基本相似,但是在微信小程序的image标签中,还有一个属性用于控制图片的缩放格式

image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性值如下:

mode值

说明

scaleToFill

(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素。会填满元素,导致形变。

aspectFit

缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整的将图片显示出来,但是会导致周围没有被填满的部分出现白色边框。

aspectFill

缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或者垂直方向是完整的,另一个方向将会发生截取。

widthFix

缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。

heigjtFix

缩放模式,高度不变,宽度自动变化,保持原图宽高比不变。

相关文章:

微信小程序——常用组件的属性介绍

常用的组件内容标签 text 文本组件类似于HTML中的span标签&#xff0c;是一个行内元素rich-text 富文本标签支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性&#xff0c;实现长按选中文本内容的效果。只有text标签支持长按选中效果&#x…...

【深度学习】 Python 和 NumPy 系列教程(廿七):Matplotlib详解:3、多子图和布局:散点矩阵图(Scatter Matrix Plot)

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 3、多子图和布局 1. subplot()函数 2. subplots()函数 3. 散点矩阵图&#xff08;Scatter Matrix Plot&#xff09; 一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于…...

解决jupyter打开的默认路径问题

已经安装完anaconda&#xff0c;但是jupyter每一次打开的路径都不是自己想要的路径&#xff0c;可以在配置文件中修改jupyter打开的默认路径&#xff0c;具体步骤如下&#xff1a; 首先打开anaconda的命令行 如果有多个环境的&#xff0c;需要输入conda activate 环境名称以下命…...

Git 学习笔记

Git 学习笔记 Git 简介 Git 是一个 开源的分布式版本控制系统。 什么是版本控制&#xff1f; 版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。 什么是分布式版本控制系统&#xff1f; 介绍分布式版本控制系统前&#xff0c;有…...

【Qt】QGroundControl入门3:源码初探

1、源码目录 QGroundControl使用pro来管理工程,可以使用qmake来编译。同时还有CMakeLists.txt,应该可以使用cmake来编译,本人还没有尝试。 QGroundControl是跨平台的,支持android、win、linux、mac、ios系统,在QGCCommon.pri中可见关于跨平台编译的配置。 1.1 目录树 …...

腾讯mini项目-【指标监控服务重构】2023-07-31

今日已办 trace_id传播 关于如何使用 trace_id 创建 span 的思路 【暂未实现 & 测试】 调研 SpanProcessor 阅读源码的test 明日待办 根据 trace_id 创建 span&#xff0c;应该需要 parent span_id 才能有 trace 的树状 span 的关系...

Rust通用编程概念(3)

Rust通用编程概念 1.变量和可变性1.执行cargo run2.变量3.变量的可变性4.常量5.遮蔽5.1遮蔽与mut区别1.遮蔽2.mut 2.数据类型1.标量类型1.1整数类型1.2浮点数类型1.3数字运算1.4布尔类型1.5字符类型 2.复合类型2.1元组类型2.2数组类型1.访问数组2.无效的数组元素访问 3.函数3.1…...

学Python的漫画漫步进阶 -- 第四步

学Python的漫画漫步进阶 -- 第四步 四、运算符4.1 算术运算符4.2 比较运算符4.3 逻辑运算符4.4 位运算符4.5 赋值运算符4.6 运算符的优先级4.7 练一练4.8 运算符的总结全部16步完成后 &#xff0c;后续就是介绍项目实战&#xff0c;请大家给予点赞、关注&#xff01; 四、运算符…...

【LeetCode-中等题】18. 四数之和

文章目录 题目方法一&#xff1a;双指针&#xff08;定2动2&#xff09; 题目 方法一&#xff1a;双指针&#xff08;定2动2&#xff09; 这题可以参考【LeetCode-中等题】15. 三数之和 区别在于&#xff0c;三数之和只需要用一个for循环定住一个数&#xff0c;然后设置两个前…...

每日一题 102二叉树的层序遍历

题目 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]] 示例 2&#xff1a…...

牛客: BM4 合并两个排序的链表

牛客: BM4 合并两个排序的链表 文章目录 牛客: BM4 合并两个排序的链表题目描述题解思路题解代码 题目描述 题解思路 以链表一为主链表,遍历两条链表 若当前链表二的节点val小于当前链表一的下一个节点val,则将链表链表二的该节点连到链表一的节点的下一个,链表一的当前节点往…...

C语言基础知识点(六)二维数组指针和地址

#include <stdio.h>int main() {int a[2][3] {2, 4, 6,8, 10, 12};printf("a:%p, a1:%p\n", a, a 1); // 相差3*sizeof&#xff08;int&#xff09;12&#xff0c;二维数组名是一个指向每一行的指针&#xff0c;a:0061FF08, a1:0061FF14prin…...

nodejs格式化输入

需求 比如我现在要格式为Axxx-xxx&#xff08;xxx是数字&#xff09;的格式&#xff0c;但是输入有可能为A1-2这种情况&#xff0c;就需要补零&#xff0c;变成A001-002 代码实现 const regex /^A(\d)\-(\d)$/; // 正则匹配桩号合法格式const match input.match(regex);if…...

国家网络安全周 | 金融日,一起 get金融行业数据安全

2023国家网络安全宣传周 热度一直在持续&#xff01; 9月15日是国家网络安全宣传金融日。 目前随着国际形势愈发严峻&#xff0c;金融机构基础设施的全面数字化升级&#xff0c;带来了全新的安全问题。数据安全不单是技术问题&#xff0c;更是已经成为一个关系社会稳定发展的…...

分布式事务解决方案之TCC

分布式事务解决方案之TCC 什么是TCC事务 TCC是Try、Confirm、Cancel三个词语的缩写&#xff0c;TCC要求每个分支事务实现三个操作&#xff1a;预处理Try、确认 Confirm、撤销Cancel。Try操作做业务检查及资源预留&#xff0c;Confirm做业务确认操作&#xff0c;Cancel实现一个…...

Git 的基础命令 码云 gitee

就比如&#xff0c;我们的开发吧&#xff0c;我自己本地分支是dqh&#xff0c;远程分支也是new //我开始提交代码 //1&#xff0c;git add . //2&#xff0c;git commit -mXXX功能 //3&#xff0c;git pull origin new(你们现在这个版本的开发分支) //这里…...

探索工业4.0:数字孪生如何重塑工业生产流程?

在过去的几十年里&#xff0c;工业生产经历了从机械化、自动化到数字化的巨大转变。随着工业4.0的到来&#xff0c;我们正处于第四次工业革命的边缘&#xff0c;这次革命将由数字孪生技术引领。本文将深入探讨数字孪生在工业生产中的应用和潜力。 数字孪生&#xff08;Digital …...

window server事件ID说明

重启&#xff1a;1074 6013&#xff1a;系统运行时间 6008&#xff1a;非正常关机或者意外关机 WindowsServer2012R2事件id6008什么意思&#xff1f; 在Windows Server 2012 R2中&#xff0c;事件ID 6008是一个系统事件&#xff0c;它通常表示系统的非正常关机或意外关机。当系…...

router-link 和 router-view的区别

router-link 实现路由之间的跳转 router-view&#xff08;路由出口组件 -> 渲染路径匹配到的视图组件&#xff09; 当你访问的地址与路由path相符时&#xff0c;会将指定的组件替换该router-view router-link router-link 点击实现路由跳转&#xff0c;to属性指向目标地址&…...

【Leetcode】139.单词拆分

一、题目 1、题目描述 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意:不要求字典中出现的单词全部都使用,并且字典中的单词可以重复使用。 示例1: 输入: s = “leetcode”, wordDict = [“leet”, “cod…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...