Text

Text component for mp

Example

bxml

 <view class="container">   <view class="page-body">    <view class="page-section page-section-spacing">      <view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">        <text>{{text}}</text>       </view>     <button disabled="{{!canAdd}}" bindtap="add">add line</button>     <button disabled="{{!canRemove}}" bindtap="remove">remove line</button>    </view>  </view> </view>

js

 const texts = [  '2017 we created a new world',  '2018 we have a group of people',  '2019 we have become a family',  '2020 most of us are happy',]Page({  onShareAppMessage() {    return {      title: 'text',      path: 'page/component/pages/text/text'    }  },  data: {    text: '',    canAdd: true,    canRemove: false  },  extraLine: [],  add() {    this.extraLine.push(texts[this.extraLine.length % 12])    this.setData({      text: this.extraLine.join('\n'),      canAdd: this.extraLine.length < 12,      canRemove: this.extraLine.length > 0    })    setTimeout(() => {      this.setData({        scrollTop: 99999      })    }, 0)  },  remove() {    if (this.extraLine.length > 0) {      this.extraLine.pop()      this.setData({        text: this.extraLine.join('\n'),        canAdd: this.extraLine.length < 12,        canRemove: this.extraLine.length > 0,      })    }    setTimeout(() => {      this.setData({        scrollTop: 99999      })    }, 0)  }})

Tips & Bug:

• Decode can be parsed with &nbsp &lt &gt &amp &apos &ensp &emsp
• The standard of whitespace is not consistent across operating systems.

Props

Name	Type	Description	Default
user-select	boolean	Whether the text is optional, this property causes the text node to display as inline-block	false
decode	boolean	Whether to decode	false
space	'ensp' | 'emsp' | 'nbsp'	Display continuous spaces