微信小程序修改 wxParse 支持代码块不换行/表格无法横向滚动等

小程序 wxParse About 1,074 words

保留换行符

使代码不换行

wxParse/wxDiscode.jsstrMoreDiscode方法注释

//str = str.replace(/\r\n/g,"");  
//str = str.replace(/\n/g,"");

保留注释

使代码块中保留注释

wxParse/html2json.jstrimHtml方法注释

function trimHtml(html) {
  return html
        // .replace(/\r?\n+/g, '')
        // .replace(/<!--.*?-->/ig, '')
        // .replace(/\/\*.*?\*\//ig, '')
        // .replace(/[ ]+</ig, '<')
}

解决表格无法横向移动

  • wxParse.xml中修改table标签,wxParse-table的外层再包裹一个wxParse-table-area
<block wx:elif="{{item.tag == 'table'}}">
  <view class="wxParse-table-area">
    <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="this">
        <template is="wxParse1" data="{{item}}" />
      </block>
    </view>
  </view>
</block>
  • 设置wxParse-table-area的样式,设置x轴可滑动
.wxParse-table-area {
  overflow-y: hidden;
  overflow-x: auto;
}
  • 设置wxParse-table的样式,设置最小宽度100%保证宽度撑满屏幕
.wxParse-table {
  display: table;
  min-width: 100%;
}

完整代码

https://github.com/fendoudebb/z-blog-wx

Views: 4,859 · Posted: 2020-02-06

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh