1. 程式人生 > >迴圈解析富文字

迴圈解析富文字

碰到了需要迴圈解析的富文字,但是網上很多都是單個文字解析,總算在網上找到了類似的方法。

借鑑: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}}"/>,無腦報錯,

如果有正確的寫法,可以評論。或者加好友互相討論。