微信小程序--表格制作

最新推荐文章于 2025-02-18 11:34:38 发布

吴小傻0

最新推荐文章于 2025-02-18 11:34:38 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_44531304/article/details/89022495

版权

本文介绍了如何在微信小程序中创建表格，详细讲解了实现过程，包括js、wxml和wxss三个关键部分的代码实现，帮助开发者掌握微信小程序中的表格制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果
在这里插入图片描述
实现过程：

–js–

   wx.request({
   
    url: "http://health.ia.ac.cn:5007/checklistParameters/getChecklistParametersByListId?listId=13985",
    method: "POST",
    data: {
   

    },
    header: {
   
      "Content-Type": "application/x-www-form-urlencoded"
    },
    success: function (res) {
   
      console.log(res.data);

      self.setData({
   
        item1: res.data.data.item1,
        item2: res.data.data.item2,
        item3: res.data.data.item3,
      })

    },
    fail: function (err) {
    }
  })

–wxml–

<view class="table1">

      <view class="tr bg-w">
        <view class="th1 ">
          <view class='th1_ch'>指标</view>
          <view class='th1_en'>（Parameters）</view>          
        </view>
  
   
        <block wx:for="{
    {item1}}" wx:key="this">
          <view class='th'>{
  {item.parameterName}}</view>
        </block>
      </view>
      <view class='tr'>
        <view class="td ">
          <view class='td_ch'>实测值</view>
          <view class='td_en'>(Measured)</view> 
        </view>
        <view class="td ">
          <view class="tdd2">(L/min)</view>
          <view class="tdd2 border-none">(mL/min/kg)</view>
        </view>
        <view class="tdd1 ">
          <view class='tdd1_row'>
            <block wx:for="{
    {item1}}" wx:key="this">
             <view class='tdd1_row_num'>{
  {item.Measured_L}}</view>
            </block>
          </view>
    
          <view class='tdd1_row'>
           <block wx:for="{
    {item1}}" wx:key="this">

最低0.47元/天解锁文章