小程序借鉴网页端，使用富文本方式的思路实现表格布局方式

2401_85340688

已于 2024-09-11 13:52:51 修改

阅读量167

点赞数 2

文章标签：小程序

于 2024-08-29 10:52:03 首次发布

本文链接：https://blog.csdn.net/2401_85340688/article/details/141672560

版权

因为微信小程序不支持table，所以通常小程序开发过程中，会想到布局样式，但有种简单的思路，就是通过微信小程序组件rich-text，利用受信任的HTML节点及属性，实现如下：

小程序借鉴网页端，使用富文本方式的思路实现表格布局方式

html 效果

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scroll-area" type="list" scroll-y>
  <view class="intro">小程序借鉴网页端，使用富文本方式的思路实现表格布局方式</view>
  <rich-text nodes="{{nodes}}" />
  <view class="intro">小程序view 组件实现示例</view>

  <!-- WXML -->
  <view class="view-table">
    <view class="view-tr">
      <view class="view-th">表头1</view>
      <view class="view-th">表头2</view>
      <view class="view-th">表头3</view>
    </view>
    <view class="view-tr">
      <view class="view-td">数据1</view>
      <view class="view-td">数据2</view>
      <view class="view-td">数据3</view>
    </view>
    <!-- 更多行和列 -->
  </view>
</scroll-view>

哈哈，期望小程序的table 有哪些更多样式呢。发现Tdesign官方给我们的福利：【API 探讨】Table 组件 https://github.com/Tencent/tdesign-miniprogram/discussions/3137