微信小程序组件（四）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参数，查看效果↓

附上官方属性说明 ↓

属性名类型默认值说明最低版本selectableBooleanfalse文本是否可选1.1.0spaceStringfalse显示连续空格1.4.0decodeBooleanfalse是否解码1.4.0

space 有效值：

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

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