微信小程序显示富文本解析,展示在页面以及图片超出处理 效果图

需求是后台返回的是富文本数据,解析完展示在页面上,这里用的是 rich-text 这个标签   

上代码啦!!!

wvml

<rich-text nodes="{{content?content:'无'}}"></rich-text>

这一步就可以把数据展示在页面上啦,

 onLoad: function (options) {
    var that = this;
    // var match_id = options.match_id?options.match_id:6;
    var match_id = options.id;
    //获取用户id 
    var user_id = wx.getStorageSync('id');
    var res = util.request(api.getMatchinfo, { match_id: match_id, user_id: user_id });
    var a = res.then(function (result) {
      console.log(result)
      if (result.code == 200) {
        var content = result.data[0].introduction;
        var contentwo = result.data[0].content;
         var contents = content.replace('<img','<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')   //处理图片问题给图片加样式。。。
         var contentwos =  contentwo.replace('<img','<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');  //处理图片问题给图片加样式。。。
          console.log(contents)
           that.setData({
          list: result.data[0],
          banner: result.data[0].photo,
          yibao: result.data.yibao,
          allbao: result.data.allbao,
          introduction:contents,
          content: contentwos
        })
      }
    })
  },

以上就可以完成啦

效果图

 


版权声明:本文为m0_64205744原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。