微信小程序内容组件text文本,微信小程序文本示例

2017-12-22

导读：text 文本。属性名类型默认值说明最低版本 selectable Boolean false 文本是否可选 1.1.0 space String false 显示连续空格 1.4.0 decode Boolean false 是否解码 1.4.0 space 有效值：值说明 ensp 中文字符...

text

文本。

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

space 有效值：

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

Tips

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

示例：

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

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')
      })
    }
  }
})

Bug & Tip

tip:text 的长按复制功能尚未实现。

更多微信小程序开发教程，可以关注hi小程序。

第二部分：如何开通一个小商店