当前位置 博文首页 > java1234的博客:微信小程序 文本 text组件

    java1234的博客:微信小程序 文本 text组件

    作者:[db:作者] 时间:2021-06-06 17:23

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

    文本。

    属性类型默认值必填说明最低版本
    selectablebooleanfalse文本是否可选 (已废弃)1.1.0
    user-selectbooleanfalse文本是否可选,该属性会使文本节点显示为 inline-block2.12.1
    spacestring显示连续空格1.4.0
    decodebooleanfalse是否解码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;
    }
    

    运行效果:

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

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