场景
在使用小程序text组件,获取接口返回数据含\n,但实际展示时却不能换行,而是原样展示。
如果给text组件硬编码字符串中有\n,则可以正常换行。
含有\n示意图原因分析
原因分析:
数据库中 \n
,转json
后会变成\\n
,所以不会换行。但是你看不到,因为前端拿到的时候这个都是\n
。
解决方案
分析出原因后,解决方案就出来了。
这里使用正则替换,借用小程序wxs文件。
注意:
1.要想匹配到\\n
,正则表达式要用\\\\n
,这是因为这里涉及到\
的转义。
2.借用小程序wxs文件,本例子中filter.wxs
。
对外暴露的方法名,可以随意起。但对内,要与定义的实现函数名对应起来。本例中代码如下是:
var myFilter = function(text){
if(text){
console.log(text);
var pattern = "\\\\n";
var target = "\n";
var reg = getRegExp(pattern, "g");
return text.replace(reg, target);
}
}
module.exports = {
filter_N:myFilter,
}
3.导入wxs,并给该模块自定义个名字;本例子中命名模块名tools
,
在需要使用的地方,就可以用了:tools.filter_N(item.adShortDesc)
<text class='ad-item-box-top-right-desc' decode='true'>{{tools.filter_N(item.adShortDesc)}}</text>
效果如下:
\n实现了换行
网友评论