微信小程序组件（四）text

今天记录一下text组件的使用，text组件本身很简单。<text>你好</text>或者<text>{{text}}</text>使用即可。记录一个text相关demo，还是先上效果图↓



1.wxml布局文件，由一个text区域和两个button组成，text变量在js中进行定义

<view>
<text>{{text}}</text>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>

2.js中代码，var为变量，initData为初始数据（前两行字符串，\n为换行符），extraLine数组初始值为空。每次点击add line触发"add"方法时，push方法向数组尾添加一个元素‘other line’,并使用join与之前的元素间隔‘\n’相连（即增加一行'other line'）；点击remove line触发''remove''方法，移除数组尾部元素，更新text域（移除一行'other line'）。

var initData = 'this is first line\nthis is second line'
var extraLine = [];
Page({
data: {
text: initData
},
add: function (e) {
extraLine.push('other line')
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')
})
}
}
})

3.js中Array基础用法

①push 向数组尾部添加一个或多个元素，并返回数组长度

②pop 移除数组尾部的元素，并返回被移除的值

③unshift 向数组头部添加一个或多个元素，并返回数组长度

④shift 从数组头部移除一个元素，并返回被移除的值

⑤join(seperator) 将数组连成一个字符串，用seperator间隔，缺省为“，’”

4.更改demo中extraLine初始值为['1','2','3']，查看运行效果↓



红色方框为整个text区域，绿色框圈住的为text初始值，蓝色框为每次点击add line时添加的字符串，第一次添加了四行。1、2、3和other line四个元素通过分隔符“\n”进行相连。修改join参数，查看效果↓



附上官方属性说明 ↓

属性名	类型	默认值	说明	最低版本
selectable	Boolean	false	文本是否可选	1.1.0
space	String	false	显示连续空格	1.4.0
decode	Boolean	false	是否解码	1.4.0

space 有效值：

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

关于text组件的学习就记录到这里，欢迎同学们交流。