微信小程序基础内容组件

  • icon
    图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
    属性包括如下:
    • type (string,必填),icon类型,可选值包括success, success_no_circle, info, warn, waiting, cancel, download, search, clear;
    • size (number/string,默认23),icon大小;
    • color (string),icon的颜色,同css的color。
<icon type="success" size="40" color="{{item}}"/>
  • progress
    进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
    属性部分包括如下:
    • percent (number),百分比0~100;
    • show-info (boolean),在进度条右侧显示百分比;
    • font-size (number/string,默认为16),右侧百分比字体大小;
    • stroke-width (number/string,默认为6),进度条线的宽度;
    • color (string,默认 #09BB07),进度条颜色;
    • active (boolean, false),进度条从左往右的动画。
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
  • rich-text
    富文本。
    拥有属性如下:
    • nodes (array/string),节点列表/HTML String;
      • type = node (name, attrs, children)
      • type = text
    • space (string),显示连续空格。
#.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

# wxml
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
  • text
    文本。
    拥有属性如下:
    • selectable (boolean,默认为false),文本是否可选;
    • space (string),显示连续空格;
    • decode (boolean,默认为false),是否解码 (&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;)。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容