04-微信小程序常用组件-基础组件

04-微信小程序常用组件-基础组件

文章目录

  • 基础内容
    • icon 图标
      • 案例代码
    • text 文本
      • 案例代码
    • progress 进度条
      • 案例代码

微信小程序包含了六大组件: 视图容器基础内容导航表单互动导航。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。

  • 其中,视图容器组件包括view和scroll-view等,用于实现页面的结构和滚动效果;
  • 基础内容组件包括text和image等,用于显示文本和图片内容;
  • 表单组件包括button、input和checkbox等,用于实现用户输入和选择;
  • 互动组件包括contact和action-sheet等,用于实现用户之间的互动和操作。

基础内容

icon 图标

  • 功能描述:图标组件

  • 属性说明

属性 类型 默认值 必填 说明 最低版本
type string icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0
size number/string 23 icon的大小,单位默认为px,2.4.0起支持传入单位(rpx/px),2.21.3起支持传入其余单位(rem 等)。 1.0.0
color string icon的颜色,同css的color 1.0.0

案例代码

wxml

<view class="group">
  <icon type="success" size="20" />
  <icon type="success_no_circle" size="30" />
  <icon type="waiting" size="40" />
  <icon type="search" size="50" />
  <icon type="info" size="60" />
  <icon type="warn" size="50" />
  <icon type="cancel" size="40" />
  <icon type="download" size="20" />
view>
  • 效果图

04-微信小程序常用组件-基础组件_第1张图片

text 文本

属性说明

Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

属性 类型 默认值 必填 说明 最低版本
selectable boolean false 文本是否可选 (已废弃) 1.1.0
user-select boolean false 文本是否可选,该属性会使文本节点显示为 inline-block 2.12.1
space string 显示连续空格 1.4.0
合法值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小
decode boolean false 是否解码 1.4.0

Bug & Tip

  1. tip: decode可以解析的有 < > & '
  2. tip: 各个操作系统的空格标准并不一致。
  3. tip:text 组件内只支持 text 嵌套。
  4. tip: 除了文本节点以外的其他节点都无法长按选中。
  5. bug: 基础库版本低于 2.1.0 时, text 组件内嵌的 text style 设置可能不会生效。

案例代码

<view class="container">
  <text>这是一段文本text>
view>
  • 效果

04-微信小程序常用组件-基础组件_第2张图片

progress 进度条

功能描述

进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性说明

属性 类型 默认值 必填 说明 最低版本
percent number 百分比0~100 1.0.0
show-info boolean false 在进度条右侧显示百分比 1.0.0
border-radius number/string 0 圆角大小 2.3.1
font-size number/string 16 右侧百分比字体大小 2.3.1
stroke-width number/string 6 进度条线的宽度 1.0.0
color string #09BB07 进度条颜色(请使用activeColor) 1.0.0
activeColor string #09BB07 已选择的进度条的颜色 1.0.0
backgroundColor string #EBEBEB 未选择的进度条的颜色 1.0.0
active boolean false 进度条从左往右的动画 1.0.0
active-mode string backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0
duration number 30 进度增加1%所需毫秒数 2.8.2
bindactiveend eventhandle 动画完成事件 2.4.1

案例代码

wxml

<view>
  <progress percent="20" show-info />
  <progress percent="40" stroke-width="12" />
  <progress percent="60" color="pink" />
  <progress percent="80" active />
view>
  • 样式代码

wxss

/* pages/demo/index.wxss */
progress{
  margin: 10px
  }
  • 效果图
    04-微信小程序常用组件-基础组件_第3张图片

下一章节 微信小程序常用组件-表单组件

你可能感兴趣的:(微信小程序从0到1(2023),微信小程序,notepad++,小程序)