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

1.实现效果

微信小程序的text标签实现换行,空格等_第1张图片

2.text标签

微信小程序的text标签实现换行,空格等_第2张图片
微信小程序的text标签实现换行,空格等_第3张图片

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.uniapp中

1.用v-html,可识别
标签
如若想使用\n,可用正则将其转换为

.replace(/\n/g, '
'
)

2.用text标签

.replace(/\n/g,’\n’)替换文本中的所有\n换行符

5.写在最后

看完本文如果觉得有用,记得点赞+关注+收藏鸭
更多小程序相关,关注苏苏的bug,苏苏的github,苏苏的码云~

你可能感兴趣的:(小程序,微信小程序,小程序,前端)