最近做项目,发现接口返回了带\n的换行符,使用组件组件没有并没有换行,普通的text标签也不能满足:
例:使用的字符串为:
richText:'基地\n课程\n'
rich-text 组件显示如下:
而我想要的是基地显示一行,课程显示一行,又不想在js页面处理,想直接在页面显示时处理,那就涉及到wxs
1.新建util.wxs
var filters = {
formatLineFeed: function (text) {
if (!text) {
return
}
var reg = getRegExp('\\\\n', 'g');
return text.replace(reg, '\n');
}
}
module.exports = {
formatLineFeed: filters.formatLineFeed,
}
2.在wxml中引入util.wxs
//src为util.wxs的路径
<wxs module="filters" src="/config/common/util.wxs"></wxs>
3.在wxml中使用
//加入样式white-space:pre-line可进行换行
<view style="white-space:pre-line">{{(filters.formatLineFeed(richText))}}</view>