微信小程序的text标签实现换行，空格等

1.实现效果

在这里插入图片描述

2.text标签

在这里插入图片描述
在这里插入图片描述

text标签内的\n会解释为换行，而\n在view标签内会被解释为空格。

text标签单个空格用\t,换行用\n。

当服务端返回的数据含有\n时候，用text标签。

3.服务端返回的\n变为\n

解决方法：
新建wxs文件：

var format = function (text) {
  if (!text) {
    return
  }
  var reg = getRegExp('\\\\n', 'g')
  return text.replace(reg, '\n')
}

module.exports = {
  format: format
}

在wxml页面中引入wxs

<wxs src="./filter.wxs" module="filter"></wxs>

<text>{{filter.format(data)}}</text>

// pages/wxCase/text/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data: "苏苏就是\\n小苏苏，哈哈哈哈\\n，苏苏"
  },


  onLoad: function (options) {

  },


})

4.更多小程序demo，关注苏苏的码云