微信小程序 rich-text 富文本图片自适应

<p :class="itemisMore == true 'richText' : 'minH'" v-if="isShow"

v-html="contentConv(itemstoryContent)">

</p>

直接在css中加max-width:100%;height:auto; 。没有生效

 方式一：在style中追加 max-width:100%;height:auto; ，此方法优点灵活，对于content中所有都起作用

// 文章html正则追加max-width

contentConv(content) {

return contentreplace(/<(img)(\/>|<\/img>)/g, function(mats) {

if (matsindexOf('style') < 0) {

return matsreplace(/<\simg/, '<img style="max-width:100%;height:auto;"');

} else {

return matsreplace(/style=("|')/, 'style=$1max-width:100%;height:auto;')

}

});

},

方式二：此方法会破坏设置的样式，再设置style="max-width:100%;height:auto;"

contentConv(content) {

    return contentreplace(/<img[^>]>/gi, function (match, capture) {

      return matchreplace(/style\s=\s([‘"])[\s\S]\1/ig, 'style="max-width:100%;height:auto;"') // 替换style

    });

}

小程序实现换肤功能结构<view class='page' id='{{SkinStyle}}'>

<view class='header'>

<view class='h-skin iconfont {{SkinStyle!=="normal""icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>

</view></view>

要模拟一个可修改的根节点page 根据 id='{{SkinStyle}}’ 来配置themewxss 每个页面@import 这个themewxss#dark header{}切换按钮全局变量：globalData:{skin:“normal”} //appjs文件中页面中bgBtn事件bgbtn:function(){ thissetData({

SkinStyle: appglobalDataskin //设置SkinStyle的值

}) wxsetStorage({ //设置storage key: 'skins', data: appglobalDataskin,

})}页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值onLoad: function (options) { var that=this;

wxgetStorage({

key: 'skins',

success: function(res) { thatsetData({ SkinStyle: resdata }) }, })}

以上就是关于微信小程序 rich-text 富文本图片自适应全部的内容，包括:微信小程序 rich-text 富文本图片自适应、小程序ui框架系列之 换肤功能、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！