039 ∞ 基础：text

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了icon类，本次来学习text类的基础内容。

text，文本。

有以下几个属性：

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选 (基础库 1.1.0 开始支持，低版本需做兼容处理。)
space	String	false	显示连续空格 (基础库 1.4.0 开始支持，低版本需做兼容处理。)
decode	Boolean	false	是否解码 (基础库 1.4.0 开始支持，低版本需做兼容处理。)

space有效值：

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

decode可以解析的有  < > & '    

各个操作系统的空格标准并不一致。

<text/> 组件内只支持 <text/> 嵌套。

除了文本节点以外的其他节点都无法长按选中。

代码index.wxml：

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">新增一行</button>
    <button bindtap="remove">移除一行</button>
  </view>
</view>

index.js：

var initData = '俺乃第一行\n在下，第二行'
var extraLine = [];
Page({
  data: {
    text: initData
  },
  add: function (e) {
    extraLine.push('FishC is Coming!')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove: function (e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

---

课后作业


1、根据提示选择所对应的space值：
a.emsp b.ensp  c.nbsp

//中文字符空格一半大小
？
//中文字符空格大小
？
//根据字体设置的空格大小
？

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图