小程序六：组件之基础内容

最新推荐文章于 2025-04-09 19:05:18 发布

转载最新推荐文章于 2025-04-09 19:05:18 发布 · 1.5k 阅读

文章标签：

#微信

微信专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了图标和进度条两种UI组件的使用方法，包括各组件的属性配置及其实现的效果展示。通过示例代码，开发者可以快速了解如何在项目中应用这些组件。

icon

图标。

属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

text

文本节点，支持转义符"\"。

除了文本节点以外的其他节点都无法长按选中

示例：

<view class="section section_gap">
    <text>{{text}}</text>
    <view class="btn-area">
        <button bindtap="add">add line</button>
        <button bindtap="remove">remove line</button>
    </view>
</view>
var initData = 'this is first line\nthis is second line'
Page({
  data: {
    text: initData
  },
  extraLine: [],
  add: function(e) {
    this.extraLine.push('other line')
    this.setData({
      text: initData + '\n' + this.extraLine.join('\n')
    })
  },
  remove: function(e) {
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')
      })
    }
  }
})

progress

进度条

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
showInfo	Boolean	false	在进度条右侧显示百分比
strokeWidth	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色
active	Boolean	false	进度条从左往右的动画

示例：

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