[toc]
⼩程序中常⽤的布局组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,
checkbox等

1、view

html中的div

<view >
 我是块元素
</view>

2、text

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制(只有该标签有这个功能)
  4. 可以对空格 回⻋ 进⾏编码
属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码
<!--pages/demo/demo.wxml-->
<text selectable="{{false}}" decode="{{true}}">
   普&nbsp;通
  </text>
 <text selectable="{{true}}" decode="{{false}}">
   普&nbsp;通
  </text>

image.png

3、image

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

  1. 图⽚标签,image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
属性类型默认值必填说明最低版本
srcstring 图片资源地址1.0.0
modestringscaleToFill图片裁剪、缩放的模式1.0.0
webpbooleanfalse默认不解析 webP 格式,只支持网络资源2.9.0
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载1.5.0
show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单2.7.0
binderroreventhandle 当错误发生时触发,event.detail = 1.0.0
bindloadeventhandle 当图片载入完毕时触发,event.detail = {height, width}1.0.0

mode 的合法值

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

Bug & Tip

tip:image组件默认宽度320px、高度240px
tip:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

<!--pages/demo/demo.wxml-->
<image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg" mode="scaleToFill" style="height:200rpx;width:200rpx"></image>

image.png

4、swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前所在滑块的 index1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
snap-to-edgeboolean"false"当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1同时显示的滑块数量1.9.0
easing-functionstring"default"指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandle current 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindtransitioneventhandle swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

easing-function 的合法值

说明最低版本
default默认缓动函数
linear线性动画
easeInCubic缓入动画
easeOutCubic缓出动画
easeInOutCubic缓入缓出动画

change事件 source 返回值

从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

  1. autoplay 自动播放导致swiper变化;
  2. touch 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。

Bug & Tip

tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

<!--pages/demo/demo.wxml-->
<swiper indicator-dots="true" autoplay="true" circular="true">
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
</swiper>

image.png

5、navigator

导航组件 类似超链接标签

页面链接。

在小程序插件中使用需要基础库版本 2.1.0 起。

属性类型默认值必填说明最低版本
targetstringself在哪个目标上发生跳转,默认当前小程序2.0.7
urlstring 当前小程序内的跳转链接1.0.0
open-typestringnavigate跳转方式1.0.0
deltanumber1当 open-type 为 'navigateBack' 时有效,表示回退的层数1.0.0
app-idstring target="miniProgram"时有效,要打开的小程序 appId2.0.7
pathstring target="miniProgram"时有效,打开的页面路径,如果为空则打开首页2.0.7
extra-dataobject target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情2.0.7
versionstringreleasetarget="miniProgram"时有效,要打开的小程序版本2.0.7
hover-classstringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber50按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber600手指松开后点击态保留时间,单位毫秒1.0.0
bindsuccessstring target="miniProgram"时有效,跳转小程序成功2.0.7
bindfailstring target="miniProgram"时有效,跳转小程序失败2.0.7
bindcompletestring target="miniProgram"时有效,跳转小程序完成2.0.7

target 的合法值

说明最低版本
self当前小程序
miniProgram其它小程序

open-type 的合法值

说明最低版本
navigate保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
redirect关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。
switchTab跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
reLaunch关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
navigateBack关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当 前的⻚⾯栈,决定需要返回⼏层
exit退出⼩程序,target="miniProgram"时⽣效2.1.0

version 的合法值

说明最低版本
develop开发版
trial体验版
release正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。

使用限制

  1. 需要用户确认跳转 从 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel
  2. 每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过 10 个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见 配置。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList

关于调试

  • 在开发者工具上调用此 API 并不会真实的跳转到另外的小程序,但是开发者工具会校验本次调用跳转是否成功。详情
  • 开发者工具上支持被跳转的小程序处理接收参数的调试。详情

Bug & Tip

  1. tipnavigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。