微信小程序 文本 text组件

Posted 2021-05-29 java1234_小锋

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

文本。

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
space	string		否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

space 的合法值

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

Bug & Tip

1. tip: decode可以解析的有 < > & '
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

示例代码

在开发者工具中预览效果

index.js

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

index.wxml

<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>

index.wxss

.intro {
  margin: 30px;
  text-align: center;
}

运行效果：

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。