循环解析富文本

碰到了需要循环解析的富文本，但是网上很多都是单个文本解析，总算在网上找到了类似的方法。

借鉴：https://blog.csdn.net/Colt666/article/details/82220191?tdsourcetag=s_pctim_aiomsg

其他代码就不带了只是写一个核心代码

   <view  wx:for="{{xlist}}" class='cmain'>
    <view class='clist fs26' data-index="{{index}}" bindtap='godet'>
      <view>{{item.title}}</view>
       <view class='f-r '> 
        {{item.show==true?"收起":"详情"}}
       <view class='cimg {{item.show==true?"xz180":""}}'>
        <image mode='aspectFill' src='../../icon/xia.png'></image>
       </view>
       </view>
    </view>
    <view class='ctext {{item.show == true ?"show":"hide"}}'>
        <view class='t-main fs28'>
         <view>:{{item.number}} </view>
          <view>：{{item.create_time}} </view>
          <view> {{item.finish_time}}</view>
          <view> {{item.expect_time}}</view>
          <view>{{item.user}} </view>
          <view>{{item.mobile}} </view>
          <view>{{item.party}}</view>
          <view>项目说明： 

<!--  这里是用到循环解析的地方-->
<!-- 主要原理就是 当xlist的下标与list下标一致时，就是xlist需要的文本 -->
<!-- 必须得用wx:for-item 和wx:for-index改变一下命名，毕竟是在循环里面，这样就可以显示了，不过这种方法可能不是最有效的，如果有更好的办法也可以，评论 -->
           <block  wx:if="{{index == itemsindex}}"  wx:for="{{list}}" wx:for-item="items" wx:for-index="itemsindex">
            <template is="wxParse" data="{{wxParseData:items}}"/>
       
           </block>
        </view>
        </view> 

      </view>
      </view>

    </view>
  </view>

req.getxlist({
      access_token: app.accessToken(),
      search: "",
      page: 1,
    }).then((res) => {
      console.log("项目列表返回", res);
      wx.hideLoading();
        if (res.code == 1) {
          let rlist = res.data[0].list;
          let xh5list = [];
                  for (let i = 0; i < rlist.length; i++) {
            rlist[i].create_time = app.gettime(rlist[i].create_time * 1000);
            rlist[i].expect_time = app.gettime(rlist[i].expect_time * 1000);
            rlist[i].finish_time = app.gettime(rlist[i].finish_time * 1000);
            rlist[i].show = false;
 //大致步骤   rlist[i].content就是返回的h5格式的代码
//先确保content有值，不然解析会报错 直接加上空格就行了。
            if (!rlist[i].content){
            rlist[i].content = " ";
            }
//将content push到一个临时数组
            xh5list.push(rlist[i].content);
          }
          console.log("xh5list",xh5list);
//然后开始解析
          for (let i = 0; i < xh5list.length; i++) {
            wxParse.wxParse('content'+ i, 'html', xh5list[i], that); 
            if (i === xh5list.length - 1) {
//最后添加到list数组 ，这个list不用去定义，可以在wxml直接使用
             wxParse.wxParseTemArray('list', 'content', xh5list.length, that)

            }

           
          }
         
          that.setData({
            xlist: res.data[0].list,
          })

        } else {
          wx.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
      .catch((err) => {
        console.log(err);
        app.errfun();
      });

自此，解析成功，一开始我试过在 <template is="wxParse" data="{{wxParseData:items}}"/>下功夫

将wxParseData:items 变成动态的写成<template is="wxParse" data="{{item.content}}"/>，无脑报错，

如果有正确的写法，可以评论。或者加好友互相讨论。

猜你喜欢