text

文本。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">text</text>
        <text class="page__desc">文字标签</text>
    </view>
    <view class="page__bd">
        <view class="section section_gap">
            <text>{{text}}</text>
            <view class="btn-area">
                <button bindtap="add">add line</button>
                <button bindtap="remove">remove line</button>
            </view>
        </view>
    </view>

    <view class="page__bd">
        <text class="outer">内嵌
            <text class="inner">这是内嵌的文字</text>
        </text>
    </view>

</view>

JS

var initData = 'this is first line\nthis is second line'
Page({
  data: {
    text: initData
  },
  extraLine: [],
  add: function(e) {
    this.extraLine.push('other line')
    
    this.setData({
      text: initData + '\n' + this.extraLine.join('\n') + "light"
    })
  },
  remove: function(e) {
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: initData + '\n' + this.extraLine.join('\n')
      })
    }
  }
})

WXSS

.page__desc{
    display: flex;
    background-color: #666666;
    color: chartreuse;
    font-size: 16px;
}
.outer {
    font-size: 20px;
    color: blue;
}
.inner {
    font-size: 14px;
    color: red;
}

API

属性	类型	默认值	必填	说明

注：

• text组件内只支持text嵌套

多平台支持

属性	平台支持