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

【微信小程序】一文带你吃透开发中的常用组件

写在前面

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为了9大类,分别是:

 1.视图容器    2.基础内容    3.表单组件        4.导航组件    5.媒体组件    6.地图组件        7.画布组件    8.开放能力    9.无障碍访问

现只举例部分常用组件,大部分可以看官方文档组件部分,不再做过多赘述。

文章目录

  • 写在前面
  • 1. view 组件
  • 2. text 组件
  • 3. image 组件
  • 4. button 组件
  • 5. swiper 和 swiper-item 组件


1. view 组件

  1. 在小程序中,通常使用<view/>代替<div/>作为容器来做布局

    <!--pages/welcome/welcome.wxml-->
    <view class="container"><image class="avatar" src="/images/测试.jpg"></image><text>Hello</text><!-- <button>微信小程序</button> --><view><text>微信小程序</text></view>
    </view>
    

2. text 组件

  1. ⽂本标签

  2. 只能嵌套text

  3. ⻓按⽂字可以复制(只有该标签有这个功能)–>selectable

  4. 可以对如: 空格回车&nbsp; 进⾏编码 -->decode

属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码

例:通过 text 组件的user-select 属性,可以实现长按选中文本内容的效果。

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

在这里插入图片描述


3. image 组件

  1. 图⽚标签,image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应

  2. ⽀持懒加载

属性名类型默认值说明
srcString图⽚资源地址
modeStringscaleToFill图⽚裁剪、缩放的模式
lazy-loadBooleanfalse图⽚懒加载
  1. mode模式列举:
模式说明
缩放scaleToFill不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放aspectFit保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。
缩放aspectFill保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来
缩放widthFix宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变
裁剪top不缩放图⽚,只显⽰图⽚的顶部区域
裁剪bottom不缩放图⽚,只显⽰图⽚的底部区域
裁剪center不缩放图⽚,只显⽰图⽚的中间区域
裁剪left不缩放图⽚,只显⽰图⽚的左边区域
裁剪right不缩放图⽚,只显⽰图⽚的右边区域
裁剪top lefttop right
bottom leftbottom right
不缩放图⽚,只显示值所指向区域
  1. 代码示例:
  <image class="avatar"  mode="aspectFit" src="/images/测试.jpg"></image>

4. button 组件

小程序中的按钮组件类似于HTML中的按钮组件,同时可以调用微信提供的丰富的功能,例如:获取用户信息,获取用户授权,转发等。

例:使用type属性设置按钮的类型:

<button >默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

在这里插入图片描述

例:使用size属性设置按钮的大小:

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

在这里插入图片描述

例:使用plain属性设置镂空按钮:

<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

在这里插入图片描述


5. swiper 和 swiper-item 组件

利用这两个组件可以实现轮播图效果:

wxml代码:

<swiper class="swiper-container">
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item><view class="item">B</view>
</swiper-item>
<swiper-item><view class="item">C</view>
</swiper-item>
</swiper>

wxss代码:

.swiper-container{height:150px;
}
.item{height:100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1) .item{background-color: aquamarine;
}
swiper-item:nth-child(2) .item{background-color: azure;
}
swiper-item:nth-child(3) .item{background-color: darkorange;
}

实现效果:
请添加图片描述
swiper组件的常用属性

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示色
indicator-colorcolorrgba(0,0,0,3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点的颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动

例:显示面板指示色:

<swiper class="swiper-container" indicator-dots="true" >

在这里插入图片描述

例:指定指示点颜色和当前选中知识点颜色:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red">

在这里插入图片描述

例:设置自动切换,间隔设置为1s:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000">

在这里插入图片描述

采用衔接滑动:

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>

在这里插入图片描述


在这里插入图片描述

相关文章:

【微信小程序】一文带你吃透开发中的常用组件

写在前面 小程序中的组件也是由宿主环境提供的&#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。 官方把小程序的组件分为了9大类&#xff0c;分别是: 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.地图组件 7.画布组件 …...

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题(完整步骤)(亲测有效)

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题&#xff08;完整步骤&#xff09;&#xff08;亲测有效&#xff09; 1.流程步骤&#xff08;本教程下载的是1.20.2版本&#xff0c;放在D盘&#xff09; 1-1. 首先去官方下载 nginx &#xff0c;然后在当前目录下创建ht…...

leaflet 加载geojson数据,随机显示不同颜色的circleMarker

第086个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet项目中加载geojson数据,随机显示不同颜色的circleMarker. 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共89行)相关API专栏目标示例效果 配置方式…...

UL grant的分配(LCP)

欢迎关注同名微信公众号“modem协议笔记”。 UE有UL data时&#xff0c;会发送BSR的告知网络侧自己详细的请求&#xff0c;期望网络能够如期下发UL grant&#xff0c;正常情况下网络侧会给UE足够的UL grant去发送UL data&#xff0c;整个过程都会比较顺利。UE收到UL grant后&a…...

真我air笔记本电脑怎么重装Win10系统?

真我air笔记本电脑怎么重装Win10系统&#xff1f;最近真我air笔记本电脑挺多用户购买的&#xff0c;因为这款电脑性价比比较高&#xff0c;适合学生和一些办公人员来使用。但是系统预制了Win11系统&#xff0c;有用户想要将系统重装到Win10来使用。那么如何去进行系统的重装呢&…...

【闲聊杂谈】深入剖析SpringCloud Alibaba之Nacos源码

Nacos核心功能点 服务注册 Nacos Client会通过发送REST请求的方式向Nacos Server注册自己的服务&#xff0c;提供自身的元数据&#xff0c;比如ip地址、端口等信息。Nacos Server接收到注册请求后&#xff0c;就会把这些元数据信息存储在一个双层的内存Map中&#xff1b; 服…...

MySQL删除或清空表内数据的方法

MySQL删除或清空表内数据的方法 一、使用MySQL清空表数据命令&#xff1a;truncate SQL语法为&#xff1a; truncate table 表名注意&#xff1a; truncate该命令会直接将数据表内数据清空&#xff1b;truncate该命令删除数据后会重置Identity&#xff08;标识列、自增字段…...

Android 权限(二): 动态权限讲解

1. 前言 继上一篇文章说到Android权限汇总, 请移步笔者的文章Android 权限(一)&#xff1a;权限大全_broadview_java的博客-CSDN博客_android 仅使用中允许权限 先要理清楚权限分类和定义,本篇文章继续说一下动态权限的申请和框架层的实现流程, 以及如何实现赋予系统应用默认的…...

【C++】2.类和对象(上)

1.面向过程和面向对象 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。 2.类的引入…...

扬帆优配|3300点半日游!上证指数冲高回落;再迎重磅利好!

今天早盘&#xff0c;A股冲高回落&#xff0c;上证指数3300点得而复失&#xff0c;深证成指也于12000点无功而返。 盘面上&#xff0c;煤炭、钢铁、房地产、才智政务等板块涨幅居前&#xff0c;酿酒、酒店餐饮、日用化工、IT设备等板块跌幅居前。北上资金净流入7.77亿元。 房地…...

如何编写性能测试计划?一篇文章教你设计符合项目的性能测试计划

上篇文章&#xff0c;我们讲过性能测试计划&#xff0c;接下来我们就来讲讲如何设计符合项目的性能测试计划。到上篇为止&#xff0c;我们了解了性能测试计划中包含的内容&#xff0c;但是&#xff0c;这个颗粒度&#xff0c;我觉得作为一名测试经验不够丰富的性能工程师来说&a…...

第3章 Windows 下安装 Memcached教程

官网上并未提供 Memcached 的 Windows 平台install 包&#xff0c;咱们可以使用以下链接来download &#xff0c;需要根据自己的去下载&#xff1a; 点击下载 在 1.4.5 版本以前 memcached 可以作为一个服务install &#xff0c;而在 1.4.5 及之后的版本删除了该功能。因此咱…...

RXjava中的操作符

要使用Rxjava首先要导入两个包&#xff0c;其中rxandroid是rxjava在android中的扩展 implementation io.reactivex:rxandroid:1.2.1implementation io.reactivex:rxjava:1.2.0Rxjava中的操作符 创建型操作符 interval 创建一个按固定时间间隔发射整数序列的Observable&#xf…...

前端页面jquery规范写法

使用最新版本的 jQuery 最新版本的 jQuery 会改进性能和增加新功能,若不是为了兼容旧浏览器,建议使用最新版本的 jQuery。以下是三条常见的 jQuery 语句,版本越新,性能越好: $(.elem) $(.elem, context) context.find(.elem) 结果 1.6.2 版执行次数远超两个老版本。 jQ…...

【HEC-RAS水动力】HEC-RAS 1D基本原理(恒定流及非恒定流)

一、数据说明 HEC-RAS模型主要由工程文件 (.prj) 文 件 、 河道地形数据文件 ( .g01)、运行文件(p01)、非恒定流文件 ( .u01) 等部分组成。 1. 一般数据 在创建并保存project文件(*.prj)后,其他data文件均会自动以同样的名字保存,但采用不同的后缀来区分各类文件。 &qu…...

2.Gin内容介绍

目录 参考 主要内容 关于Web 创建项目 为什么要用框架 Gin框架介绍 Gin框架安装与使用 安装 第一个Gin示例&#xff1a; RESTful API Gin渲染 HTML渲染 自定义模板函数 静态文件处理 使用模板继承 补充文件路径处理 JSON渲染 XML渲染 YMAL渲染 protobuf渲染…...

python--matplotlib(3)

前言 Matplotlib画图工具的官网地址是 http://matplotlib.org/ Python环境下实现Matlab制图功能的第三方库&#xff0c;需要numpy库的支持&#xff0c;支持用户方便设计出二维、三维数据的图形显示&#xff0c;制作的图形达到出版级的标准。 其他matplotlib文章 python--matpl…...

从源码中探究React中的虚拟DOM

引文 通过本文你将了解到 什么是虚拟DOM&#xff1f;虚拟DOM有什么优势&#xff1f;React的虚拟Dom是如何实现的&#xff1f;React是如何将虚拟Dom转变为真实Dom&#xff1f; 一、概念 虚拟DOM实际上是一种用来模拟DOM结构的javascript对象。当页面变化的时候通过一种算法来…...

容器架构概述

文章目录1. 介绍容器历史2. 描述 Linux 容器架构3. Podman 管理容器1. 介绍容器历史 近年来&#xff0c;容器迅速流行起来。然而&#xff0c;容器背后的技术已经存在了相对较长的时间。2001年&#xff0c;Linux引入了一个名为VServer的项目。VServer 是第一次尝试在高度隔离的…...

掌握MySQL分库分表(四)分库分表中间件Sharding-Jdbc,真实表、逻辑表、绑定表、广播表,常见分片策略

文章目录什么是ShardingSphere-JDBC&#xff1f;Sharding-Jdbc常见概念术语数据节点Node真实表逻辑表绑定表广播表数据库表分片&#xff08;水平库、表&#xff09;分片键 (PartitionKey)行表达式分片策略 InlineShardingStrategy&#xff08;必备&#xff09;标准分片策略Stan…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...