微信小程序1，常用组件 view、swiper、swiper-item、 scroll-view、 icon、progress、text、rich-text、button、input、image

常用组件

view

类似于html中的div，是块级元素。

属性	说明
hover-class	为string类型，默认为none，指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	为boolean类型，默认为false，指定是否阻止本节点的祖先节点出现点击态
hover-start-time	为number类型，默认为50，按住后多久出现点击态，单位毫秒
hover-start-time	为number类型，默认为400，手指松开后点击态保留时间，单位毫秒

swiper

滑块视图容器，即轮播图最外面的容器。其中只可放置swiper-item组件，否则会导致未定义的行为，下方为常用属性，其他很多属性可以去官网看。

属性	说明
indicator-dots	为boolean类型，默认为false,是否显示面板指示点
indicator-color	指示点的颜色
indicator-active-color	当前选中指示点的颜色
autoplay	为boolean类型，默认为false，是否自动切换
current	为number类型，默认为0，当前滑块的index
interval	为number类型，默认为5000，自动切换时间间隔
duration	为number类型，默认为500，滑动动画时长
circular	为boolean类型，默认为false，是否为衔接滑动
display-multiple-items	为number类型，默认为1，同时显示的滑块数量

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

属性	说明
item-id	为string类型，为该 swiper-item 的标识符
skip-hidden-item-layout	为boolean类型，默认为false，是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	说明
scroll-x	默认为false，是否允许横向滚动
scroll-y	默认为false，是否允许纵向滚动
show-scrollbar	默认为true，滚动条显隐控制 (同时开启 enhanced 属性后生效)
bindscroll	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
paging-enabled	默认为false，分页滑动效果 (同时开启 enhanced 属性后生效)
refresher-background	设置自定义下拉刷新区域背景颜色
refresher-default-style	设置自定义下拉刷新默认样式，支持设置 `black

icon

图标组件

属性	说明
type	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	icon的颜色，同 css 的color

progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	说明
percent	百分比
show-info	默认为false，在进度条右侧显示百分比
font-size	右侧百分比字体大小
border-radius	圆角大小
color	进度条颜色
active	进度条从左往右的动画

text

文本，为行内元素，类似于html中的span

属性	说明
user-select	默认为false，文本是否可选，该属性会使文本节点显示为 inline-block

rich-text

富文本

属性	说明
nodes	节点列表/HTML String
user-select	文本是否可选，该属性会使节点显示为 block

nodes

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。

//HTML String渲染
const htmlSnip =
`<div class="div_class"><h1>Title</h1><p class="p">Life is&nbsp;<i>like</i>&nbsp;a box of<b>&nbsp;chocolates</b>.</p>
</div>
`
//节点渲染
const nodeSnip =
`Page({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'You never know what you're gonna get.'}]}]}
})
`

button

属性	说明
size	default 默认大小； mini 小尺寸
type	primary 绿色；default 白色；warn 红色
–	–
plain	默认false，是否镂空
disabled	是否禁用
loading	名称前是否带 loading 图标
form-type	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件；submit 提交表单；reset 重置表单

input

属性	说明
value	输入框的初始内容
text	text 文本输入键盘;number 数字输入键盘;idcard 身份证输入键盘;digit 带小数点的数字键盘;safe-password 密码安全输入键盘;nickname 昵称输入键盘
password	是否是密码类型
placeholder	输入框为空时占位符
disabled	是否禁用
focus	获取焦点
cursor-spacing	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性	说明
src	图片资源地址
mode	图片裁剪、缩放的模式(具体属性值在下方)
webp	为Boolean类型，默认不解析 webP 格式，只支持网络资源
lazy-load	boolean类型，图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	默认为false，长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	当错误发生时触发，event.detail = {errMsg}
bindload	当图片载入完毕时触发，event.detail = {height, width}

mode

属性值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

微信小程序1，常用组件 view、swiper、swiper-item、 scroll-view、 icon、progress、text、rich-text、button、input、image相关推荐

微信小程序的常用组件
目录一.常用的视图容器类组件 ① view ② scroll-view ③ swiper 和 swiper-item 二.常用的基础内容组件 ① text ② rich-text 三.其它常用组件 ...
微信小程序之常用组件及其属性
目录基础组件: text icon progress 容器组件: view 和scroll-view swiper和swiper-item 表单组件: form input textarea ra ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序：常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
微信可以识别哪些HTML语言,微信小程序一些常用标签与HTML的对应关系
参考地址: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 微信小程序中的常用标签: view(视图容器). ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序学习：（五）swiper塌陷问题解决
微信小程序学习:(五)swiper塌陷问题解决 github地址: https://github.com/leoricding/- (一)问题分析需求:实现tab切换,内容切换:内容切换,tab也切 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...