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：

1. <view class="btn-area">
   
2.   <view class="body-view">
   
3.     <text>{{text}}</text>
   
4.     <button bindtap="add">新增一行</button>
   
5.     <button bindtap="remove">移除一行</button>
   
6.   </view>
   
7. </view>

复制代码

index.js：

1. var initData = '俺乃第一行\n在下，第二行'
   
2. var extraLine = [];
   
3. Page({
   
4.   data: {
   
5.     text: initData
   
6.   },
   
7.   add: function (e) {
   
8.     extraLine.push('FishC is Coming!')
   
9.     this.setData({
   
10.       text: initData + '\n' + extraLine.join('\n')
    
11.     })
    
12.   },
    
13.   remove: function (e) {
    
14.     if (extraLine.length > 0) {
    
15.       extraLine.pop()
    
16.       this.setData({
    
17.         text: initData + '\n' + extraLine.join('\n')
    
18.       })
    
19.     }
    
20.   }
    
21. })

复制代码

---

课后作业


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

1. //中文字符空格一半大小
   
2. ？
   
3. //中文字符空格大小
   
4. ？
   
5. //根据字体设置的空格大小
   
6. ？
   

复制代码

答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图