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

微信小程序基础内容组件

作者: 荒剑离 | 来源:发表于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;)。

相关文章

  • 应用程序UI编程

    基础组件 基础内容组件 表单组件 微信小程序伸缩布局 视图容器 view scroll-viewswiper-view

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

  • 微信小程序基础内容组件

    icon图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。属性包括如下:type (s...

  • 微信小程序基础内容组件

    帮助文档:https://developers.weixin.qq.com/miniprogram/dev/com...

  • 微信小程序(五)基础内容组件

    基础内容组件的使用场景 icon图标组件 (1) icon图标组件: icon组件:是小程序提供的图标组件。借助i...

  • 小程序好文集合

    组件篇 微信小程序:组件实践 整体梳理 微信小程序开发深入解读

  • 微信小程序-canvas压缩图片使用入门

    微信小程序canvas组件官方文档 微信小程序canvas组件官方文档canvas API canvas组件介绍 ...

  • 微信小程序入门

    引言 构建 基础组件 功能组件 常用代码举例 参考文献 微信小程序,是腾讯结合 微信 sdk 推出的一种微信开发...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

  • 微信小程序组件生命周期

    以下内容全部引用微信小程序官方文档,因官方文档内容较多,查找比较繁琐,常用的记录留存。 微信小程序官方文档:组件生...

网友评论

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

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