The rich text

const htmlSnip =
`
      
 
       
Title
 
       
 Life is  like  a box of   chocolates. 
 
      
 `

const nodeSnip =
`Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.' }] }] } }) `

Page({
  onShareAppMessage() {
    return {
      title: 'rich-text'.path: 'page/component/pages/rich-text/rich-text'}},data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false.renderedByNode: false.nodes: [{
      name: 'div'.attrs: {
        class: 'div_class'.style: 'line-height: 60px; color: #1AAD19; '
      },
      children: [{
        type: 'text'.text: 'You never know what you\'re gonna get.'}}}]],renderHtml() {
    this.setData({
      renderedByHtml: true})},renderNode() {
    this.setData({
      renderedByNode: true})},enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  }
})
Copy the code

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">Render through HTML String</view>
      <view class="page-content">
        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">Rendering HTML</button>
        <block wx:if="{{renderedByHtml}}">
          <rich-text nodes="{{htmlSnip}}"></rich-text>
        </block>
      </view>
    </view>

    <view class="page-section">
      <view class="page-section-title">Render by node</view>
      <view class="page-content">
        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
        <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">Rendering Node</button>
        <block wx:if="{{renderedByNode}}">
          <rich-text nodes="{{nodes}}"></rich-text>
        </block>
      </view>
    </view>
  </view>

</view>
Copy the code

The text

const texts = [
  'In January 2011, wechat 1.0 was released'.'In May of the same year, wechat 2.0 voice intercom was released'.'In October, wechat 3.0 added a shake function'.'March 2012, wechat users exceeded 100 million'.'Released on wechat 4.0 moments in April'.'In July of the same year, wechat 4.2 launched a public platform'.'In August 2013, wechat 5.0 released wechat Pay'.'September 2014, enterprise was launched.'.'In the same month, release wechat card package'.'January 2015, the first wechat Moments advertisement'.'January 2016, released on wechat of the enterprise'.'January 2017, small program release'.'... '
]

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)}})Copy the 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>
Copy the code