微信小程序 文本 text组件

矫情吗；* 2021-09-07 23:24 544阅读 0赞

完整微信小程序(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

  1. var initData = 'this is first line\nthis is second line'
  2. var extraLine = [];
  3. Page({ 
  4.   data: { 
  5.     text: initData
  6.   },
  7.   add: function (e) { 
  8.     extraLine.push('other line')
  9.     this.setData({ 
  10.       text: initData + '\n' + extraLine.join('\n')
  11.     })
  12.   },
  13.   remove: function (e) { 
  14.     if (extraLine.length > 0) { 
  15.       extraLine.pop()
  16.       this.setData({ 
  17.         text: initData + '\n' + extraLine.join('\n')
  18.       })
  19.     }
  20.   }
  21. })

index.wxml

  1. <view class="btn-area">
  2.   <view class="body-view">
  3.     <text>{
  4.    {text}}</text>
  5.     <button bindtap="add">add line</button>
  6.     <button bindtap="remove">remove line</button>
  7.   </view>
  8. </view>

index.wxss

  1. .intro { 
  2.   margin: 30px;
  3.   text-align: center;
  4. }

运行效果：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ui2bnhNz-1621996483422)(image-20210526094137954.png)\]

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

发表评论

表情：
评论列表 （有 0 条评论，544人围观）

还没有评论，来说两句吧...

相关阅读