专栏首页极客起源小程序开发实战(6):基础组件(text、icon和progress)

小程序开发实战(6):基础组件(text、icon和progress)

小程序在有很多组件,其中基础组件用来显示一些静态的信息,也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。

1. text组件

text是小程序中最简单的组件,用于显示文本。该组件支持转义符“\”。text组件的使用方法如下:

<text>要显示的内容</text>

text组件支持嵌套,也就是允许下面的形式。

<text>
    要显示的内容
    <text>嵌套的内容</text>
</text>

下面是一段完整的使用text组件的布局代码,在这段代码中,包含了两个text组件(嵌套形式),以及三个按钮。分别向text组件中添加文本、删除文本以及改变text组件中文字的颜色。

<text style="margin: 20px;font-size: 40px;color: {{color}}">
  {{text}}
  <text style="color:#00ffff">(最后一行)</text>
</text>
<view style="margin: 20px;">
  <button bindtap="add">添加一行</button>
  <button bindtap="remove">删除一行</button>
  <button bindtap="setColor">设置文字颜色</button>
</view>

这段布局代码的显示效果如图1所示。

图1 text组件效果演示

这三个按钮分别对应三个函数:add、remove和setColor。改变text组件中文本时通过改变text变量的值完成的,而设置text组件中文本的颜色是通过改变color变量的值完成的,完整的实现代码如下:

var initData = '第一行\n第二行'
Page({
  data: {
    text: initData,    //  文本的初始数据
    color: '#ff0000'   //  文本的初始颜色
  },
  extraLine: [],       //  用于保存追加的字符串
  add: function (e) {
    //  最近一个新行
    this.extraLine.push('新行' + (this.extraLine.length + 1));
    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')
      })
    }
  },
  setColor: function (e) {
    //  让文本颜色在红色和蓝色之间不断切换
    if (this.data.color == '#ff0000') {
      this.setData(
        {
          color: '#0000ff'
        }
      )
    }
    else {
      this.setData(
        {
          color: '#ff0000'
        }
      )
    }
  }
})

从这段JavaScript代码可以看出,当点击“添加一行”按钮后,会向extraLine数组中添加一行字符串。然后会利用“\n”让字符串折行。

2. 系统内置图标组件(icon)

icon组件用于显示系统内置的图标,该组件并不能自己指定图标文件。icon组件包含如下3个属性。

  • size:Number类型,用于设置图标的尺寸,默认值是23
  • type:String类型,用于设置系统图标的类型,详细的类型见后面的JavaScript代码
  • color:Color类型,和css中的color属性的作用相同。该属性没有默认值,如果不指定该属性,每一个类型的图标会使用自己的默认颜色,如success图标的默认颜色是绿色

下面分别来演示这三个属性的使用方法。

下面的布局代码通过循环为icon组件显示的图标设置了不同的尺寸。

<block wx:for-items="{{iconSize}}">
  <icon type="success" size="{{item}}" />
</block>

其中iconSize是在index.js文件中定义的数组变量,为了方便,下面给出了index.js文件的完整代码,其中iconType数组定义了目前icon组件支持的所有系统图标的类型。

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70].reverse(),  //  倒序数组
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
      'info_circle', 'cancel', 'search', 'clear'
    ]
  }
})

在初始化iconSize数组时,使用了reverse函数将数组元素进行倒序处理,所以前面的布局代码显示的效果如图2所示。

图2 从大到小显示success图标

下面的布局代码用于根据iconType数组显示不同的系统图标,这些图标都会使用默认的颜色,字号都是45。

<view style="margin-top:30px">
  <block wx:for-items="{{iconType}}">
    <icon type="{{item}}" size="45" />
  </block>
</view>

显示效果如图3所示。

图3 显示所有的系统图标

下面的布局代码根据iconColor数组为icon设置不同的颜色。

<view style="margin-top:30px">
  <block wx:for-items="{{iconColor}}">
    <icon type="safe_success" size="45" color="{{item}}" />
  </block>
</view>

显示效果如图4所示。

图4 为icon组件设置不同的颜色

3. progress组件

progress组件可以设置完成的百分比。该组件有如下5个属性。

  • percent:Float类型,默认值是0,该属性的取值范围是0~100
  • show-info:Boolean类型,默认值是false,如果该属性为true,会在进度条右侧显示百分比
  • stroke-width:Number类型,默认值是6,单位是px,表示进度条的宽度
  • color:Color类型,默认值是#09BB07,表示进度条颜色
  • active:Boolean类型,默认值是false,如果该属性值为true,表示进度条在装载时会以动画形式显示(从左到右的动画)

下面的布局代码演示了progress组件的各种用法。

<view style="margin:30px">
    <progress percent="20" show-info/>
    <progress percent="40" active/>
    <progress percent="60" stroke-width="10" />
    <progress percent="80" color="#10AEFF" />
</view>

显示效果如图5所示。

图5 进度条效果

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序开发实战(8):可与其他组件绑定的文本组件(label)

    可能有很多读者认为label和text差不多,都是用来显示文本的。其实label和text一点都不像,label本身也不能显示任何文本,该组件只是与其他组件进行...

    蒙娜丽宁
  • 微信小程序开发实战(12):滑杆组件(slider)和form组件

    step:Number类型,默认值是1,表示滑杆滑动的步长,取值必须大于0,并且可被max - min整除

    蒙娜丽宁
  • 微信小程序开发实战(13):图像组件(image)

    image可以用来显示图像,这些图像可以是本地的,也可以是网络图像。例如,下面的布局代码显示了本地图像。

    蒙娜丽宁
  • flag no_redetermination and switch

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • 重写边缘计算的灾难恢复计划

    多年以来,编写灾难恢复计划一直是IT部门的责任,但是现在必须重新调整这些计划,以针对边缘计算和云计算环境进行故障转移。有哪些新功能?组织如何修改其计划?

    静一
  • python: .xml文件 操作

    成功将第一个“object”项的”name”属性的文本改为了“Nanjing”:

    JNingWei
  • Appium自动化(9) - appium元素定位的快速入门

    https://www.cnblogs.com/poloyy/category/1693896.html

    小菠萝测试笔记
  • 一个有意思的递归定义

    最近在看一本《WEB全栈工程师的自我修养》一书,其中涉及到了npm这个词的意义,非常有意思。

    bisal
  • python中的编码问题

    在python2.x中,有两种数据类型,unicode和str,这两个都是basestring的子类

    py3study
  • AAAI 2020 | 王培松:稀疏二值神经网络,不需要任何技巧,取得SOTA精度(视频解读)

    本文是对中科院自动化所完成,被 AAAI2020 录用的论文《Sparsity-inducing Binarized Neural Networks》进行解读。

    AI科技评论

扫码关注云+社区

领取腾讯云代金券