微信小程序day02_10之基础组件text

文章目录

• 一. text的属性介绍与演示

一. text的属性介绍与演示

text 为文本。
text的属性如下

其中space 只能设置如下的值

其中需要注意的地方是

• decode可以解析的有   < > & '    
• 各个操作系统的空格标准并不一致。
• 组件内只支持 嵌套。
• 除了文本节点以外的其他节点都无法长按选中。

代码示例
js中代码如下

//初始化的数据 并用\n换行
const initData = 'this is first line\nthis is second line'
//定义一个数组,用于添加或者删除行 
const extraLine = []
Page({
  data: {
    text: initData //把初始化的数据绑定到页面中
  },
  // 点击添加按钮触发的时间
  add(e) {
    // 往数组中添加行 
    extraLine.push('other line')
    this.setData({
      // 如果是增加一行, 那么加上初始化的数据加上一行
      //并且把数组中所有的数据拼接成一个字符串, 用\n 隔开用于换行
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove(e) {
    if (extraLine.length > 0) {
      //pop() 方法用于删除数组的最后一个元素。
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

wxml中的代码如下

<view class="btn-area">
  <view class="body-view">
    <view>
      <text selectable="true">{{text}}</text>
    </view>
    <text selectable="true" space='nbsp'>演示空格            我是空格</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

显示的效果如图 :