微信小程序原生实现无边框table组件支持横向和纵向滚动-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序原生实现无边框table组件支持横向和纵向滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图（支持单元格样式自定义）

微信小程序table组件,微信小程序,小程序

table组件代码

wxml文件

<!-- 表格 -->
<view class="table">
  <!-- 整体横向滑动 -->
  <scroll-view class="tableX" scroll-x>
    <!-- 表头 -->
    <view class="tr">
      <view
        wx:for="{{columns}}"
        wx:for-item="column"
        wx:key="index"
        style="width:{{column.width || '200rpx'}}"
        class="th"
        >{{column.title}}
      </view>
    </view>
    <!-- 内容 -->
    <!-- 除表头外纵向滑动 -->
    <scroll-view class="tableY" scroll-y>
      <view class="tr" wx:for="{{tableData}}" wx:for-item="table" wx:key="index">
        <view
          style="border-bottom:{{index===tableData.length-1? 'none':'1px solid #DBDBDB'}};width:{{columnItem.width || '200rpx'}}"
          class="{{columnItem.class? 'td '+columnItem.class : 'td' }}"
          wx:for="{{columns}}"
          wx:for-item="columnItem"
          wx:for-index="columnIndex"
          wx:key="columnIndex"
          >{{table[columnItem.key]}}
        </view>
      </view>
    </scroll-view>
  </scroll-view>
</view>

wxss文件

/* 项目表格 */
.table {
  background: #FFFFFF;
  box-shadow: 0px 0px 10rpx 0px rgba(32,76,131,0.12);
  border-radius: 20rpx ;
  box-sizing: border-box;
  padding: 40rpx 20rpx 20rpx 20rpx;
}
.tableY {
  height: 500rpx;
}
.tr, .tableY {
  width: 900rpx;
}
.tr {
  display: flex;
}
.th{
  padding-bottom: 8rpx;
  border-bottom: 1px solid #26A13A;
  text-align: center;
  font-weight: bold;
  font-size: 20rpx;
  font-weight: 400;
  color: #000000;
}
.td {
  padding: 20rpx 0rpx;
  text-align: center;
  font-size: 18rpx;
  font-weight: 400;
  color: #666666;
}

js文件

// components/pr-table/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    columns: {
      type: Array,
      value: [],
    },
    tableData: {
      type: Array,
      value: [],
    },
  },
  options: {
    styleIsolation: 'apply-shared', //开启后可以通过page页面的wxss来修改组件的样式，主要用来对单元格样式自定义
  },
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {},
});

组件使用

1、在page页面的json文件中引入组件（默认大家都会引入）；
2、在page页面的wxml文件中使用组件

<pr-table columns="{{columns}}" tableData="{{tableData}}" />

3、在page页面的js文件中设置数据

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tableData: [
      {
        product: '450冠草莓',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '高',
        oderDay: '05-10',
      },
      {
        product: '480屋顶包原味',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '中',
        oderDay: '05-07',
      },
      {
        product: '原味西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '红枣西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450原味瓶',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450冠草莓',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '高',
        oderDay: '05-10',
      },
      {
        product: '480屋顶包原味',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '中',
        oderDay: '05-07',
      },
      {
        product: '原味西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '红枣西南预制杯',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
      {
        product: '450原味瓶',
        specifications: '223ml*16',
        isNewProduct: '新品',
        estimatedProfit: '底',
        oderDay: '05-09',
      },
    ],
    columns: [
      { title: '产品', key: 'product', width: '200rpx' },
      { title: '规格', key: 'specifications', width: '200rpx' },
      { title: '是否新品', key: 'isNewProduct', class: 'newProduct', width: '100rpx' }, // class可以修改单元样式
      { title: '预估利润', key: 'estimatedProfit', class: 'estimatedProfit', width: '200rpx' },
      { title: '订单日', key: 'oderDay', class: 'oderDay', width: '200rpx' },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getTabBar().init();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});

4、在page页面的wxss文件中修改样式文章来源地址https://www.toymoban.com/news/detail-723347.html

page {
  box-sizing: border-box;
  background: #F2F3F7;
  padding: 0rpx 20rpx;
}

.newProduct {
  font-weight: bold !important;
  color: #71BDE4 !important;
}
.estimatedProfit {
  font-weight: bold !important;
  color: #EBD364 !important;
}
.oderDay {
  font-weight: bold !important;
  color: #F39E38 !important;
}