微信小程序自学（七）-- 组件-基础内容

最新推荐文章于 2024-04-20 19:25:20 发布

原创最新推荐文章于 2024-04-20 19:25:20 发布 · 367 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了小程序开发中常用的三种UI组件：icon图标组件，用于展示各种预设图标；text文本组件，提供丰富的文本显示和编辑功能；progress进度条组件，用于展示任务进度。文章深入探讨了各组件的属性配置及使用示例。

一 icon

图标。

属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number / String	23px	icon的大小，单位px（2.4.0起支持rpx）
color	Color		icon的颜色，同css的color
aria-label	String		无障碍访问，（属性）元素的额外描述 2.5.0

示例：

在开发者工具中预览效果

<view class="group">
  <block wx:for="{{iconSize}}"><icon type="success" size="{{item}}" /></block>
</view>

<view class="group">
  <block wx:for="{{iconType}}"><icon type="{{item}}" size="40" /></block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}" />
  </block>
</view>

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

二 text

文本。

属性名	类型	默认值	说明	最低版本
selectable	Boolean	false	文本是否可选	1.1.0
space	String	false	显示连续空格	1.4.0
decode	Boolean	false	是否解码	1.4.0

space 有效值：

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

Tips

decode可以解析的有   < > & ' &ensp; &emsp;
各个操作系统的空格标准并不一致。
<text> 组件内只支持 <text> 嵌套。
除了文本节点以外的其他节点都无法长按选中。

示例：

在开发者工具中预览效果

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

const initData = 'this is first line\nthis is second line'
const extraLine = []
Page({
  data: {
    text: initData
  },
  add(e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove(e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

text

Bug & Tip

bug : 基础库版本低于 2.1.0 时， <text> 组件内嵌的 <text> style 设置可能不会生效。

三 progress

进度条。

属性名	类型	默认值	说明	最低版本
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
border-radius	Number / String	0	圆角大小，单位px（2.4.0起支持rpx）	2.3.1
font-size	Number / String	16	右侧百分比字体大小，单位px（2.4.0起支持rpx）	2.3.1
stroke-width	Number / String	6	进度条线的宽度，单位px（2.4.0起支持rpx）
color	Color	#09BB07	进度条颜色（请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	1.7.0
bindactiveend	EventHandle		动画完成事件	2.4.1
aria-label	String		无障碍访问，（属性）元素的额外描述	2.5.0

示例：

在开发者工具中预览效果

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

progress