Text

Text component for mp

Example

bxml

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

Code
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

Events