美文网首页
微信小程序基础内容组件

微信小程序基础内容组件

作者: 荒剑离 | 来源:发表于2020-01-21 22:17 被阅读0次
    • 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;)。

    相关文章

      网友评论

          本文标题:微信小程序基础内容组件

          本文链接:https://www.haomeiwen.com/subject/dpfyzctx.html