先說一下rich-text的實現,很簡單
html
<rich-text nodes="{{myrich}}"></rich-text>
js 注意：裏面不能用view 否則運行不出來,可以用html的標籤，詳細見文檔 https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
onLoad: function (options) {// 監聽頁面加載的生命週期函數
var that = this;
var myrich = '<div class="test" style="font-size:16px;color:red">hello,world</div>';
that.setData({
myrich:myrich
});
},
運行結果
下面是我的例子，實現效果，多個數組拼接，數組裏包含特殊符號，實現替換的內容要做單獨樣式處理
大概效果圖
先看下json數據格式
要把title 裏面titlestr字段裏的@分別換成 replace字段裏的數據組成一句話 ，在把des裏的titlestr字段裏的@分別替換成replace字段裏的數據也組成一句話，如果遇到\n 做換行處理
{
"status": "200",
"msg": "OK",
"isPC": 1,
"data": {
"copywriting": [
{
"title": "交通",
"grade": "2.6",
"detailmessage": [
{
"imgurl": "comm_subway",
"grade": "4.272",
"title": {
"titlestr": "距 @ @ 682米",
"replace": [
"2號線",
"安定門地鐵站-A口"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
},
{
"imgurl": "comm_bus",
"grade": "2.67",
"title": {
"titlestr": "距 @ 281米",
"replace": [
"安定門西站"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
},
{
"imgurl": "comm_car",
"grade": "1",
"title": {
"titlestr": "北二環內，路網擁堵\n高峯時間平均時速爲20.3km/h",
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
}
]
},
{
"title": "生活",
"grade": "4.9",
"detailmessage": [
{
"imgurl": "comm_restaurant",
"grade": "4.8",
"title": {
"titlestr": "500米內",
"color": ""
},
"des": {
"titlestr": "平價餐廳@家 ，@家4星餐廳\n中檔餐廳@家 ，@家4星餐廳\n高檔餐廳@家 ，@家4星餐廳",
"replace": [
"74",
"12",
"16",
"9",
"10",
"9"
],
"color": ""
}
},
{
"imgurl": "comm_shop",
"grade": "4.98997",
"title": {
"titlestr": "500米內 @便利店\n1000米內 @綜合超市\n2000米內 @商場",
"replace": [
"3家",
"89家",
"14家"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
},
{
"imgurl": "comm_convenience",
"grade": "0",
"title": {
"titlestr": "500米內 藥店 @\n1000米內 銀行 @",
"replace": [
"3家",
"19家"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
}
]
},
{
"title": "品質",
"grade": "0.8",
"detailmessage": [
{
"imgurl": "comm_quality",
"grade": "0",
"title": {
"titlestr": "@\n物業公司爲@",
"replace": [
"1982年建成",
"無物業管理服務"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
}
]
},
{
"title": "醫療",
"grade": "4.2",
"detailmessage": [
{
"imgurl": "comm_hospital",
"grade": "0",
"title": {
"titlestr": "2000米內 三級醫院 @\n距離 @ (三甲/A類) @",
"replace": [
"3家",
"首都醫科大學附屬北京中醫醫院",
"1815米"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
}
]
},
{
"title": "運動",
"grade": "5",
"detailmessage": [
{
"imgurl": "comm_afforest",
"grade": "0",
"title": {
"titlestr": "距離 @ @ ",
"replace": [
"青年湖公園",
"801米"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
},
{
"imgurl": "comm_fitness",
"grade": "0",
"title": {
"titlestr": "1000米內 @ 健身房\n距離最近健身房@ @",
"replace": [
"27家",
"V動健身",
"157米"
],
"color": ""
},
"des": {
"titlestr": "",
"color": ""
}
}
]
}
]
}
}
重要的js部分
var houseid; // 這個不重要,我的頁面數據需要用的這個字段
Page({
data: {
//房源id
detailId: '',
//城市id
cityId:1,
//指數選項卡 這個需要，是選項卡的
currentTab: 0,
},
onLoad: function (options) {
// this.setData({
// detailId: options.houseId,
// cityId: options.cityId,
// })
this.getData();
},
getData: function () { // 數據獲取和處理函數
var that = this;
var url_host = '數據地址';
houseid = { hid: '500109808' };
wx.request({
url: url_host + '/exchange/' + that.data.cityId + '/v1/allinfo',//json數據地址
data: houseid ,
method: "post",
header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
success: function (res) {
if (res.data.status == 200) {
console.log(res.data.data);
// 設置標題
wx.setNavigationBarTitle({
title: res.data.data.houseinfo.housetitle
})
let copywriting = res.data.data.copywriting; // 指數信息
let copywriting_title = []; // 指數標題
let copywriting_info = []; // 指數詳細信息
if (copywriting != undefined) {
for (let i = 0; i < copywriting.length; i++) {
copywriting_title.push(copywriting[i].title); // 處理標題信息
let copywriting_child = copywriting[i].detailmessage;
let child_info = [];
for (let j = 0; j < copywriting_child.length; j++) { //處理詳細信息
//內容替換
let info = copywriting_child[j].title.titlestr;
let des = copywriting_child[j].des.titlestr;
// @ 替換
if (copywriting_child[j].title.replace != undefined && copywriting_child[j].title.replace.length > 0) {
for (let k = 0; k < copywriting_child[j].title.replace.length; k++) {
info = info.replace('@', `<span style='color:#FFB102'>` + copywriting_child[j].title.replace[k] + `</span>`);
}
}
if (copywriting_child[j].des.replace != undefined && copywriting_child[j].des.replace.length > 0) {
for (let l = 0; l < copywriting_child[j].des.replace.length; l++) {
des = des.replace('@', `<span style='color:#FFB102'>` + copywriting_child[j].des.replace[l] + `</span>`);
}
}
// /n換行替換
info = info.replace(/\n/g, "<br>");
des = des.replace(/\n/g, '<br>');
// 數組封裝
let obj = {
'icon': copywriting_child[j].imgurl,
'info': info + ' ' + des
};
child_info.push(obj);
}
copywriting_info.push(child_info);
}
}
console.log(copywriting_info)
that.setData({
communityInfo: res.data.data.houseinfo,
copywriting_title: copywriting_title, // 指數標題
copywriting_info: copywriting_info, // 指數詳細
});
}
}
});
},
//選項卡點擊切換
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current,
})
}
},
})
html部分
<view class='xq_zhishu' wx:if='{{copywriting_info.length>0}}'>
<view class='xq_zhishu_tit'>指數</view>
<view class="swiper-tab">
<view class="tabbox" wx:for="{{copywriting_title}}" wx:key="index">
<text class="swiper-tab-item {{currentTab== index ?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item}}</text>
</view>
</view>
<view wx:for="{{copywriting_info}}" wx:key="index" class = "test_{{index}} {{currentTab == index ? 'show':'hidden'}}" >
<scroll-view>
<view class="adrss_box" wx:for="{{item}}" wx:for-item="cell" wx:key="index">
<view class="zs_icon icon_0{{index}}"></view>
<view class="zs_cont"><rich-text nodes="{{cell.info}}" space="nbsp"></rich-text></view>
</view>
</scroll-view>
</view>
</view>
css部分
.xq_zhishu{padding-bottom:42rpx;}
.xq_zhishu_tit{color:#292B33;font-size:38rpx;padding:36rpx 40rpx;font-weight:bold;}
.title {width:100%;height:88rpx;background: white;display:flex;align-items:center;justify-content: space-around;}
.topTabSwiper{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
.topTabSwiper:after{content: ""; clear: both;display: block;}
.tabbox{float:left; width:20%;text-align:center; }
.tab{display:block;height:50rpx;line-height:50rpx;width:80%;border-radius:25rpx;color:#292b33;margin:0 auto;}
.tabBorer {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00);
background: -o-linear-gradient(left, #ffc20d ,#ffad00);
background: -moz-linear-gradient(left, #ffc20d ,#ffad00);
background: linear-gradient(to right, #ffc20d ,#ffad00);}
.topTabSwiper .swiper{width:100%;}
.swiper_con{width:100%;height: 100%;}
.zs_bottom_con{border-top:1rpx solid #edecf1;height:83rpx;line-height:83rpx;padding:20rpx 40rpx 0 40rpx;margin-top:20rpx;overflow: hidden}
.phb,.phb_name,.phb_num{float:left;margin-right:12rpx;font-size:25rpx;}
.phb{width:95rpx;height:40rpx;line-height:40rpx;text-align:center;background:#ff5032;border-radius:5rpx;color:#fff;margin-top:19rpx;}
.phb_name{color:#75797c;}
.phb_num{color:#ffc112;}
.adrss_box{padding:20rpx 40rpx;color:#7D7E82;font-size:30rpx;overflow: hidden}
.swiper-tab{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
.swiper-tab-item text {display:block;}
.swiper-tab-item{float:left;height:50rpx;line-height:50rpx;width:80%;text-align:center;border-radius:25rpx;color:#292b33; }
.active {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00);
background: -o-linear-gradient(left, #ffc20d ,#ffad00);
background: -moz-linear-gradient(left, #ffc20d ,#ffad00);
background: linear-gradient(to right, #ffc20d ,#ffad00);}
.juzhong{margin: 0 auto;}
.domain{background-color: #fff; height: 100%; margin:0 10px;}
.show{ display: block;}
.hidden{ display: none;}
.zs_icon{width:32rpx;height:32rpx;margin-right:10rpx;margin-top:5rpx;}
.zs_icon image{width:32rpx;height:32rpx;}
.zs_cont{width: calc(100% - 42rpx);}
.zs_icon , .zs_cont{float:left}
.test_0 .icon_00{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAATlBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRUPnjK/AAAAGXRSTlMAMMCQUMvX+PCglmHpiVkYBbYQC+KtayM7tQKVogAAALdJREFUOMvV0EkSgyAARFEcGAUCjun7XzSyEERIzCKb/I1l9SstILFtlVRzgGsq141ccgNFFrXuvDcMRbRJ+5OjEk+ColobAbA0RR78BHpSNACfgb0D/f+B4e4etOouKZ2BWj8Gut1jx8DCm8iADY/HAVxxihqwGRDt3vz2FwLV5ghkHXQRPGZUYiNJYilmrsKemjxATaeklMowYHEkzwDtFD+4C5PvKu2hkV7EAPiwJ+GF6MlXvQBbuyXPkjJmdwAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_0 .icon_01{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAXVBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRWwfZgwAAAAHnRSTlMAEe8OF7kf9t+I2bNoKMWupJqAdlUE0pVfShvkOzbFBi75AAAAx0lEQVQ4y73R2WrDMBBG4YktWV6TOImzdDnv/5iF8jcDkYxvSr6rGXPAgrH/suwyi7l6TmTSXD+DAaheANFkghjsRYgwaX7At2W+4KHxAiEPGrh4UOdBgLvGsRjUMG4FZ43nreC0FnQaO1gs58ENrBjcNM2wK4CjgiNFHhxYMSiIFPk59zCEcMBp33vQmAWc9quC6++HD5z2XkELsWkiTnur4JMVlYJqK0issT8d6I/PV+lUfnDofe8BTuamHtLo+z1BO9mb/ACrVSffhLc+5AAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_0 .icon_02{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAaVBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRVROx17AAAAInRSTlMABfoV80oJ6XpnMyohb9+VhXNhWj/t0LKLw7ueUxDJpn/XV+90IQAAAVdJREFUOMutU9uWgjAMTNrSC5Q7C4iwav//I7d3cfXReSFNhumcJIVvAotWQkeaTZYfy3VjGC2JcZjHt3o12/wdZxPxq1/rBbNJdtQmgxUvda+88h/zBDk50cyeawqlOeMkcbFH6YLuTNATxvpoPa2Hi3g5tE2s/8C1TgJSA/dsOpQIZcsc4QYPESSQ47gQz+6t+2XgtJW60lWygVI40z1QRYL4nUd26wlbuvNuEqjvnbXmCSwkBfRvBOEJqXWgMkG5/ORyDvm3/dnFCugOMhJYzE5VJlxhdTJbuCJNsEYSoxvufhh68YRrTC9wCUEXh/dAGkaZe0srq9xMMJDk1QPF6Sh7fiRJs0FAHZzzQFfCJAyRgJOSaxdGR4XJmPG5MQcg9VuozLkZGaNPKM6he92oDBV9S1zS//82f2qiL7z5b/P2eLAP9kZ3i5D889O7CEIKKHYOX8QfYXQ3zAzQoQgAAAAASUVORK5CYII=);background-size:32rpx 32rpx;}
.test_1 .icon_00{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAXVBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRWwfZgwAAAAHnRSTlMACXa03CXi1vbuAoDLwKhgTzYVt5eRV0orHg+hiW+TTwmDAAAAsklEQVQ4y9WQ2RKDIAwAsQrIrXhf+f/P7LSDBxkZX9t93R1IQn6NeeiMXnqf8tTCF1PfyEwSbyDARyKzSE+uW6sODvJKtRs9fW1KAFHCifi8Mxx/c7iF7bMoSGBDoFMBCwF7CppUwEPgUsG6X9jeez2RgFe6xLbk7eVSkjqGvKLxsSlHQRVEKhA9Crx7RWwUBTJDSBRMS5NfaGyNglFATI8DPOTjFgMeUhWMFTuMtTP5I95p+Sols5/NLgAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_1 .icon_01{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRXPx+5HAAAAEHRSTlMADOhI1DIr9vG5rJyWgHtiFyUU7wAAAKVJREFUOMvVklsKxSAMRBNbbX27/9XeKJU7lNlAz4cQc9QwKB/icOOFOwTZfTQE0EFQEILV4v89P08EHGFtXrt/6TyBQ3Srm5QtFGm2dhDqHEr1HItTdQ5dQcjDSKLlsvuLSpp1BiGOZaio97akVUYQnrtdC6Y097wEwj0IN82JJxW4ECAnygE5UTrkRKmQEyVDTpQIOVFOlhNPynHB8S+L3/Yr/AC8+BtJww6FtAAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_1 .icon_02{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAOVBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRWlJaqkAAAAEnRSTlMAcBDBr9C2n0QmOTEH5aiShHw1Maq4AAAAi0lEQVQ4y82SOw6EMAxE2SU4H8LP9z/sjpwtTGKQkCjymilmGj956I9AFG7qNDIY00U9E/+h2aijY4WLde25wp8mBxscasAmauCt3g+K/G3IDxVGR0lciINEzZ0rDCIIlhAwulYDaJqkkd0EVR0O9mJuY96K2b35pZBLiFjEM+LHQLtc2GB54R964Qc5HBFfhVg6vAAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_2 .icon_00{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAe1BMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX////9zSD//fT/9dT+8cP/99n+7rP+4n7+33T+2Vn+10/91EL/+eb/+OH+66n+66b+55f90Tb+5Itga484AAAAFXRSTlMAHdbKCPjt5bywoI9gRTgqIxcNcnHBLh2PAAAA00lEQVQ4y62SRw7DMAwE3dJ72ZXcYqfn/y9MBNBJXOiT50JAMwB5kDcw+xlm+x6/DQAEW9WvxnCMV4o/oOLYpaM5fsyjlvdD/BP6Db+eoM5kXfPLEZqMln9+AcHkWYmKxfe8KYTCMsWPaST3QXhasnDzLA9+I7iRiZtZpgSWfHxGyYsSkEwNTEyrBCnJ6+1KxkqQU8iV4Cw+gRLEdNiHUYKX06fS6XZQLbiLagbVgovRgxM/FOgP7ugJTMLE6IFDdDvYQWMnPyZQfOAJm7DThxtvEN60HjHPP8BibAAAAABJRU5ErkJggg==);background-size:32rpx 32rpx;}
.test_3 .icon_00{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEX////9yRX9xAH9yBH91Eb9yhr/+N/9yA79zST+7a3+5Iv/++7/+/D9xwn9zB/900D90DH//fP/9dL/9M3/88r+5Ij9wwD//vr/99r/8sT+3Wv//ff9zin+66n+4n39ziv/7rf+5Y7910/91kv92Vn92FcQsUaiAAAA70lEQVQ4y82SWXLDIAxAA0SA7bDY4N2Os7T3v2KLU2hnKvKZyftBzDwkITi8lP5StjvlpUeF2tBuh9oaFSottuM3i9AVXkKyqRmGZmJy/ne4ca4Z9Y9A9Bj2f9K4KaQ2QJa9BCEmrJNP3d07GlBKxSXQ3eso3MwRwdzSZXiG1H6xFghrEed1WgggkKWKglQsQmkKlf4VBHnA4PMDGHkgJCJo72VeYELBwEEJlstgreHcWItnYHAevZtn58czsJzgs0IAYgl41uSQbzIoknP5fA5tq5Ogk7AJEgFIodhO8TWvmiLoa5++1FoirPXhTfgCwa0T4mIswUAAAAAASUVORK5CYII=);background-size:32rpx 32rpx;}
.test_4 .icon_00{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAWlBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRUbsrYYAAAAHXRSTlMAUNAX7+biA829oYVuOichEPPUw6uOempLNjULCQhTc34AAACuSURBVDjLzdLLDoMgEAVQKGAVFfH9vP//m41GCaWDiy6anh25k5A7GfZzVZpWdzmXgOTR+JnjkD/pXGQ4ZYLKSwVHlcSAhEcSA5u1otvDTli7RTriEGs6SffBdNPRNY12pJsuCQLJwnzDY5ec2fEY2If5GpgZaYQzEvGq4dFrmJsGbxoTHEKNQM39JfUg9G5ZogWpvZalEKGuU+GOBjR3iLMpgMJ7fjFglDLs77wAub8fF8m1HN0AAAAASUVORK5CYII=);background-size:32rpx 32rpx;}
.test_4 .icon_01{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAATlBMVEUAAAD9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRX9yRUPnjK/AAAAGXRSTlMAwLCQ792LbBMOuqJ6AffrpZ1ZVi+mgjEwEZVSBgAAAI9JREFUOMvdktsOgyAQRIFFVBStl172/3+02zSYqdnGGJ903s7kkAC75jxJ1NkKuLIdJRRGZm6AB+ERhbsUHrgXvqFgWQL8QbfQq61VoX48v1RwUAXiIpNTBce8UyhtTqkLxDl0XNh3h+PP3P7J+d8s2nkpojpNSCNFD+zX+zBJMawOTAYTfPzZyehDMhfKGz2xF4zCnnvWAAAAAElFTkSuQmCC);background-size:32rpx 32rpx;}