精华内容
下载资源
问答
  • 微信小程序表格样式
    千次阅读
    2019-08-13 13:08:38

    微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式

    wxml:

       <view class="table">
          <view class="tr">//标题行,设置了一个的背景样式
            <view class="th ">1</view>
            <view class="th ">2</view>
            <view class="th ">3</view>
            <view class="th ">4</view>
          </view>
          <block wx:for="" wx:key="">
            <view class="tr {{index % 2 ==0 ?'bg-w':'bg-g'}}">//内容行,判断若行下标为单数,则设置一个背景颜色,若为双数,则设置另一个颜色
              <view class="td">1</view>
              <view class="td">2</view>
              <view class="td">3</view>
              <view class="td">4</view>
          </block>
        </view>
    

    wxss:

    .table {
      border: 0px solid darkgray;//根据需求设置,可有可无
    }
    
    .tr {
      width: 100%;
      display: flex;//设置弹性容器
      align-items: center;//内容垂直居中
      border-bottom: 1rpx solid #f7f8fb;//可有可无
    }
    
    .th {
      width: 25%;//注意列单位个数,因为我写的例子是四个单位,所以每个单位宽度设置为25%
      height: 3rem;//高度按需求设置
      display: flex;//设置弹性容器
      justify-content: center;//内容居中显示
      align-items: center;//内容垂直居中
      background: #dbb97a;//设置背景颜色
      color: #fff;//字体颜色
      font-size: 26rpx;//字体大小
    }
    
    .td {
      width: 25%;//同上
      display: flex;//设置弹性容器
      justify-content: center;//内容居中显示
      text-align: center;//文字居中
      font-size: 26rpx;//设置字体大小
      color: #dbb97a;//字体颜色
      padding: 0.5rem 0 0.5rem 0;//设置上下padding
    }
    
    .bg-w {
      background: #ccc;
    }
    
    .bg-g {
      background: #f7f8fb;
    }
    
    

    最后:

    以上就是关于微信小程序简单的自定义模仿table的全部内容啦。
    再说几句,
    1.th 是表示每行单元格个数的单位,可根据需求任意添加个数,对应的需要添加同样个数的 td 对齐。
    2.没有贴出 js 数据模板,但是在 block 模块里留下了 wx:forwx:key的位置,可根据需求,自定义数据,循环获取数据,或者进行其他的操作。
    3.条条大路通罗马,没有最好的方案,只有更好的方法。该模板很简单很通俗,或许会在将来有一定的帮助,本人只是为了做一个记录和参考,若有不足的地方,还望各路大佬指出。

    更多相关内容
  • 微信小程序 css样式自制表格

    效果图

     

     

    HTML部分

    <view class="table">
            <view class="tr bg-w">
              <view class="th">头像</view>
              <view class="th">树名</view>
              <view class="th">植树时间</view>
              <view class="th">礼物数</view>
              <view class="th">总达成率</view>
            </view>
            <block v-for="(item, index) in listData" :key="index">
              <view class="tr bg-g" v-if="index % 2 == 0">
                <view class="td">{{item.txtp}}</view>
                <view class="td">{{item.treename}}</view>
                <view class="td">{{item.zssj}}</view>
                <view class="td">{{item.lws}}</view>
                <view class="td">{{item.zdcl}}</view>
              </view>
              <view class="tr" v-else>
                <view class="td">{{item.txtp}}</view>
                <view class="td">{{item.treename}}</view>
                <view class="td">{{item.zssj}}</view>
                <view class="td">{{item.lws}}</view>
                <view class="td">{{item.zdcl}}</view>
              </view>
            </block>
          </view>

    Js部分

    data () {
        return {
          listData: [
            {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
            {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
            {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
            {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
            {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'}
          ]
        }
      },

    Css部分

    <style>
    .table {
      border: 0px solid darkgray;
    }
    .tr {
      display: flex;
      width: 100%;
      justify-content: center;
      height: 1rem;
      align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
      width: 40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 1rem;
      align-items: center;
    }
    </style>

    展开全文
  • 微信小程序:好看的表格样式

    千次阅读 2020-10-15 15:39:55
    一个在微信小程序中创建表格的demo 效果图 最后做出来大概就是这个样子的,先看下设计图:(画的真好看) 设计图 然后再看下数据返回的格式: 数据返回格式 这数据...o.0... 分析数据得知,后台...

    一个在微信小程序中创建表格的demo

     

    效果图

     

    最后做出来大概就是这个样子的,先看下设计图:(画的真好看)

    设计图

    然后再看下数据返回的格式:

    数据返回格式

    这数据...o.0...

    分析数据得知,后台返回的数据远比设计图上描绘的复杂,内容是不固定的,而且需要显示一周的排班

    个人思路:用scroll-view来做,整个表格按 -行- 分为4大块:排班、上午、下午、晚上。

        ①先将从今天开始往后7天的日期放到数组中,作为第一大块的数据源

        ②循环遍历数据,找出所有排班在上午的时间,然后分别放到7个数组中(因为可能有多个数据,还是需要用数组存放)

        ③同理得出下午和晚上的数据

     

    1、第一步:更改数据格式,将数据处理之后变为如下形式:

    第一大块:weekArray:

            存放从今天开始 -> 7天后的数据在数组中

    第二、三、四大块:sch_listData:

    数据更改后

     

    为什么要把数据变成这样呢?总感觉这样的方法有点傻,但又想不到别的办法,所以先这样吧,麻烦是麻烦了点,幸好最后的效果还不错。

    wxml:

    <!--  科室排班表 -->
    
    <scroll-view scroll-x="true" class='scrollClass'>
      <view class='table'>
        <view class='table_header'>
          <view class="th" style='width:130rpx;background-color:white'>
            <view class='centerclass cell_label'>排班</view>
          </view>
          <block wx:for="{{dateArray}}">
            <view class='th'>
              <view class="cell_label centerclass">{{item.weekName}}</view>
              <view class="cell_date_label centerclass">{{item.date_text}}</view>
            </view>
          </block>
        </view>
    
    
    
        <block wx:for="{{sch_listData}}">
          <view class='table_main'>
            <!--上午下午晚上  -->
            <view class='td' style='width:130rpx;background-color:white;'>
              <view class="cell_label centerclass">{{item.time_title}}</view>
            </view>
    
            <!-- 周一 -->
            <view class='td'>
              <block wx:for="{{item.Mon_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Mon_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
    
            <!--周二  -->
            <view class='td'>
              <block wx:for="{{item.Tues_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Tues_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
            <!--周三  -->
            <view class='td'>
              <block wx:for="{{item.Wed_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Wed_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
    
              </block>
            </view>
            <!--周四  -->
            <view class='td'>
              <block wx:for="{{item.Thur_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Thur_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
            <!--周五  -->
            <view class='td'>
              <block wx:for="{{item.Fri_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Fri_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
            <!--周六  -->
            <view class='td'>
              <block wx:for="{{item.Sat_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Sat_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
            <!-- 周日 -->
            <view class='td'>
              <block wx:for="{{item.Sun_text}}" wx:for-item="trade" wx:for-index="ind">
                <view class='{{item.Sun_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{{trade.docName}}' data-timeperiod='{{trade.timePeriod}}'
                  data-dayOfWeek='{{trade.dayOfWeek}}'>{{trade.docName}}</view>
              </block>
            </view>
    
    
          </view>
        </block>
      </view>
    </scroll-view>

     

    wxss:
     

    /*科室排班表  */
    .table{
      display: inline-flex;
      flex-direction: column;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-bottom: 0;  
    }
    
    .scrollClass {
      display: flex;
      width: 100%;
      white-space: nowrap;
      margin-top: 23px;
      height: 100%;
      background-color: white;
    }
    
    .table_header {
      display: inline-flex;
    }
    
    .th {
      display: flex;
      flex-direction: column;
      width: 200rpx;
      height: 90rpx;
      background: rgba(241, 252, 255, 1);
      border-right: 1rpx solid rgba(218, 217, 217, 1); 
      border-bottom: 1rpx solid rgba(218, 217, 217, 1); 
      justify-content: center;
      align-items: center;
      overflow-x: auto;
    }
    .cell_label{
      font-size: 26rpx;
      color: rgba(74, 74, 74, 1);
    }
    .cell_date_label{
      font-size: 20rpx;
      color: rgba(74, 74, 74, 1);
    }
    .table_main {
      display: inline-flex;
      flex-direction: row;
    }
    .right-item{
      display: flex;
      flex-direction: row;
    }
    .td {
      display: flex;
      flex-direction: column;
      width: 200rpx;
      /* height: 90rpx; */
      background: white;
      justify-content: center;
      align-items: center;
      border: 1rpx solid rgba(218, 217, 217, 1);
      border-top: 0;
      border-left:0; 
    }
    
    .table_Text_class {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      font-size: 30rpx;
      color: rgba(55, 134, 244, 1);
      width: 100%;
      word-break: normal;
      border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    }
    .table_Text_last_class{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      font-size: 30rpx;
      color: rgba(55, 134, 244, 1);
      width: 100%;
      word-break: normal;
    }

    js:
     

    var weeksArray = [];
    
    var GetDepartment_info = function (that) {
      var urlStr = 'http://123.56.180.48:9080/jklApi/rest/' + 'goldDepartment/getHomePageData/' + '8a819ee651431b2701514386fa050008';
      console.log('科室详情的url:' + urlStr);
    
      wx.request({
        url: urlStr,
        method: "GET",
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'mhealthkey': '1'
        },
        success: function (res) {
          console.log("科室详情:" + JSON.stringify(res));
    
          var sList = res.data.data.scheduleInfo;
          var sch_listData = dealData(sList);
    
          that.setData({
    
            sch_listData: sch_listData,
    
          });
        },
        fail: function (e) {
          that.setData({
            loadingHidden: true,
          })
        }
      })
    }
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        sch_listData: [],
        dateArray: [],
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var scheduleList = [
          {
            "scheduleId": "8aaf510c5e3de339015e3de932660000",
            "resourceName": "专科门诊",
            "dayOfWeek": "1",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c60c6700b0160de3031f40598",
            "resourceName": "普通门诊",
            "dayOfWeek": "1",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff80808162a3453f0162a3f036440000",
            "resourceName": "普通门诊",
            "dayOfWeek": "1",
            "timePeriod": "A",
            "docName": "赵医生",
            "doctorId": "8aaf510c53f56ee0015432b3ee760e22",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff8080815e36ffb0015e375d3d850006",
            "resourceName": "专家门诊",
            "dayOfWeek": "1",
            "timePeriod": "B",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5e0ddfd6015e2d4e85290288",
            "resourceName": "特需门诊",
            "dayOfWeek": "1",
            "timePeriod": "B",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "02f18a9c0a374b4184f35b40a9dde3f0",
            "resourceName": "专家门诊",
            "dayOfWeek": "1",
            "timePeriod": "B",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff80808160ea422a0160ea4f6fb10001",
            "resourceName": "普通门诊",
            "dayOfWeek": "1",
            "timePeriod": "C",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff80808160e90a3e0160e93c9f6e001e",
            "resourceName": "普通门诊",
            "dayOfWeek": "1",
            "timePeriod": "C",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "e34f2c6fbb134e408d67ee212b66173d",
            "resourceName": "专科门诊",
            "dayOfWeek": "2",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "72dd38ee6dad423884ba5075ca067365",
            "resourceName": "其他门诊",
            "dayOfWeek": "2",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff8080815e3c5c70015e3dc12bd20002",
            "resourceName": "普通门诊",
            "dayOfWeek": "2",
            "timePeriod": "B",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff8080815de9c956015dea16c0fd004e",
            "resourceName": "特需门诊",
            "dayOfWeek": "2",
            "timePeriod": "B",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c6290b5390162913c56de00fc",
            "resourceName": "普通门诊",
            "dayOfWeek": "2",
            "timePeriod": "C",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff8080816121c47e0161224a13d20006",
            "resourceName": "普通门诊",
            "dayOfWeek": "2",
            "timePeriod": "C",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "0ab98c9b1c874162b7b0c3797ff74759",
            "resourceName": "特需门诊",
            "dayOfWeek": "3",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "402881b05de9c5c4015dea11d62d000d",
            "resourceName": "普通门诊",
            "dayOfWeek": "3",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ff8080815e3782fc015e37a3b23e0006",
            "resourceName": "普通门诊",
            "dayOfWeek": "3",
            "timePeriod": "B",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "5d253a9c81004bc4827cc06c4ff55182",
            "resourceName": "普通门诊",
            "dayOfWeek": "3",
            "timePeriod": "B",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c62745ce401627479421d0001",
            "resourceName": "特需门诊",
            "dayOfWeek": "3",
            "timePeriod": "C",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "ad566119a9804d63885b3f6e7f52b1eb",
            "resourceName": "专家门诊",
            "dayOfWeek": "4",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "b79212dbeed74df380e0436f24af2a29",
            "resourceName": "其他门诊",
            "dayOfWeek": "4",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "81d4a516809140f08d9ce2fc3cc37836",
            "resourceName": "特需门诊",
            "dayOfWeek": "4",
            "timePeriod": "B",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "6c6cdaf06adc4f9f9e32446daa84d143",
            "resourceName": "特需门诊",
            "dayOfWeek": "4",
            "timePeriod": "B",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5dfab03a015e08caafa8004f",
            "resourceName": "特需门诊",
            "dayOfWeek": "5",
            "timePeriod": "A",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "47f8bbc4be8c4e21af23cb89c74ad796",
            "resourceName": "专科门诊",
            "dayOfWeek": "5",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5e3370ed015e33d3d8810033",
            "resourceName": "专家门诊",
            "dayOfWeek": "5",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5dfab03a015e08cadcd10054",
            "resourceName": "特需门诊",
            "dayOfWeek": "5",
            "timePeriod": "B",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "6f2e45a9d60c479eadfe4406ff7ac8b0",
            "resourceName": "会诊中心",
            "dayOfWeek": "5",
            "timePeriod": "B",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5eae93dc015eb78056a60001",
            "resourceName": "普通门诊",
            "dayOfWeek": "5",
            "timePeriod": "B",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "9ee899faebbc4cf68139aca8631b7892",
            "resourceName": "夜间会诊",
            "dayOfWeek": "5",
            "timePeriod": "C",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5ebe5987015ec1e393840158",
            "resourceName": "普通门诊",
            "dayOfWeek": "6",
            "timePeriod": "A",
            "docName": "医生C",
            "doctorId": "8a2256334b021c33014b06124fd60181",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8f8522911a484a0d9ca14ab109957fef",
            "resourceName": "普通门诊",
            "dayOfWeek": "6",
            "timePeriod": "A",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "fbc1c442ca3f11e4b00300163e004c9f",
            "resourceName": "特需门诊",
            "dayOfWeek": "6",
            "timePeriod": "A",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c6253714201626153a8fb074a",
            "resourceName": "预约挂号",
            "dayOfWeek": "6",
            "timePeriod": "B",
            "docName": "测试李医生",
            "doctorId": "8a2256334c265f88014c26d521fc0103",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "f777b64a9b224520920c34de26662934",
            "resourceName": "其他门诊",
            "dayOfWeek": "6",
            "timePeriod": "B",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "8aaf510c5e0a27d6015e0a3043920009",
            "resourceName": "特需门诊",
            "dayOfWeek": "6",
            "timePeriod": "C",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          },
          {
            "scheduleId": "699b23a064b0462890343c3f3fd2749b",
            "resourceName": "专科门诊",
            "dayOfWeek": "7",
            "timePeriod": "B",
            "docName": "医生A",
            "doctorId": "8a2256334888ffb301488b90a3fe005f",
            "ifOpenYuYueService": "0"
          }
        ];
    
        for (var j = 0; j < scheduleList.length; j++) {
          console.log('----' + scheduleList[j].docName);
        }
    
        var daysArray = getSevenDays();
        var sch_listData = dealData(scheduleList);
    
    
        this.setData({
          dateArray: daysArray,
          sch_listData: sch_listData,
        });
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        // var that = this;
        // GetDepartment_info(that);
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
    
      clickDoctor: function (e) {
        var $dict = e.currentTarget.dataset;
    
        var tag = $dict.dayofweek;//周几
        var appdate = '';
        for (var k = 0; k < weeksArray.length; k++) {
          if (weeksArray[k].weekNum == tag - 1) {
            appdate = weeksArray[k].date_text;
          }
        }
        var dd = new Date();
        appdate = dd.getFullYear() + '/' + appdate;
    
    
        var str = '';
        var timeStr = $dict.timeperiod;
        if (timeStr=="A"){
          timeStr = '上午';
        } else if (timeStr=="B"){
          timeStr = '下午';
        }else{
          timeStr = '晚上';
        }
    
    
        str = appdate + ' ' + timeStr + ' '+$dict.docname;
        wx.showModal({
          title: '提示',
          content: str,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            }
          }
        })
      },
    
    })
    
    
    
    
    var getSevenDays = function () {
      var daysArray = [];
      var dayDict = {};
      var weekStr = '';
      var weekNum = '';
    
      for (var i = 0; i < 7; i++) {
        var date = new Date(); //当前日期
        var newDate = new Date();
        newDate.setDate(date.getDate() + i);
    
        var m = (newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1);
        var d = newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
    
        var time = newDate.getFullYear() + "-" + m + "-" + d;
        var dayStr = m + "/" + d;
    
        if (getWeekByDay(time) == '周一') {
          weekNum = 0;
        } else if (getWeekByDay(time) == '周二') {
          weekNum = 1;
        } else if (getWeekByDay(time) == '周三') {
          weekNum = 2;
        } else if (getWeekByDay(time) == '周四') {
          weekNum = 3;
        } else if (getWeekByDay(time) == '周五') {
          weekNum = 4;
        } else if (getWeekByDay(time) == '周六') {
          weekNum = 5;
        } else if (getWeekByDay(time) == '周日') {
          weekNum = 6;
        }
        dayDict = { "date_text": dayStr, "weekName": getWeekByDay(time), "weekNum": weekNum };
    
        console.log("date_text:" + dayStr + "weekName:" + getWeekByDay(time) + "weekNum:" + weekNum)
        daysArray.push(dayDict);
      }
    
      weeksArray = daysArray;
      return daysArray;
    }
    
    var getWeekByDay = function (dayValue) {
      var day = new Date(Date.parse(dayValue.replace(/-/g, '/'))); //将日期值格式化  
      var today = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); //创建星期数组  
      return today[day.getDay()];  //返一个星期中的某一天,其中0为星期日  
    }
    
    
    var dealData = function (scheduleInfoList) {
      var tag = weeksArray[0].weekNum;
      console.log('tag:' + tag);
      var ar = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7];
      var A_Mon_text_ar = [];
      var A_Tues_text_ar = [];
      var A_Wed_text_ar = [];
      var A_Thur_text_ar = [];
      var A_Fri_text_ar = [];
      var A_Sat_text_ar = [];
      var A_Sun_text_ar = [];
      var B_Mon_text_ar = [];
      var B_Tues_text_ar = [];
      var B_Wed_text_ar = [];
      var B_Thur_text_ar = [];
      var B_Fri_text_ar = [];
      var B_Sat_text_ar = [];
      var B_Sun_text_ar = [];
      var C_Mon_text_ar = [];
      var C_Tues_text_ar = [];
      var C_Wed_text_ar = [];
      var C_Thur_text_ar = [];
      var C_Fri_text_ar = [];
      var C_Sat_text_ar = [];
      var C_Sun_text_ar = [];
    
      for (var i = 0; i < scheduleInfoList.length; i++) {
        // console.log(scheduleInfoList[i].scheduleId + "222222");
        if (scheduleInfoList[i].timePeriod == 'A') {
          if (scheduleInfoList[i].dayOfWeek == ar[tag]) {
            A_Mon_text_ar = A_Mon_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 1]) {
            A_Tues_text_ar = A_Tues_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 2]) {
            A_Wed_text_ar = A_Wed_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 3]) {
            A_Thur_text_ar = A_Thur_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 4]) {
            A_Fri_text_ar = A_Fri_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 5]) {
            A_Sat_text_ar = A_Sat_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 6]) {
            A_Sun_text_ar = A_Sun_text_ar.concat(scheduleInfoList[i]);
          }
        }
        else if (scheduleInfoList[i].timePeriod == 'B') {
          if (scheduleInfoList[i].dayOfWeek == ar[tag]) {
            B_Mon_text_ar = B_Mon_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 1]) {
            B_Tues_text_ar = B_Tues_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 2]) {
            B_Wed_text_ar = B_Wed_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 3]) {
            B_Thur_text_ar = B_Thur_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 4]) {
            B_Fri_text_ar = B_Fri_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 5]) {
            B_Sat_text_ar = B_Sat_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 6]) {
            B_Sun_text_ar = B_Sun_text_ar.concat(scheduleInfoList[i]);
          }
        } else {
          if (scheduleInfoList[i].dayOfWeek == ar[tag]) {
            C_Mon_text_ar = C_Mon_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 1]) {
            C_Tues_text_ar = C_Tues_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 2]) {
            C_Wed_text_ar = C_Wed_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 3]) {
            C_Thur_text_ar = C_Thur_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 4]) {
            C_Fri_text_ar = C_Fri_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 5]) {
            C_Sat_text_ar = C_Sat_text_ar.concat(scheduleInfoList[i]);
          } else if (scheduleInfoList[i].dayOfWeek == ar[tag + 6]) {
            C_Sun_text_ar = C_Sun_text_ar.concat(scheduleInfoList[i]);
          }
        }
      }
    
      var sch_listData = [{ "time_title": "上午", "Mon_text": A_Mon_text_ar, "Tues_text": A_Tues_text_ar, "Wed_text": A_Wed_text_ar, "Thur_text": A_Thur_text_ar, "Fri_text": A_Fri_text_ar, "Sat_text": A_Sat_text_ar, "Sun_text": A_Sun_text_ar },
      { "time_title": "下午", "Mon_text": B_Mon_text_ar, "Tues_text": B_Tues_text_ar, "Wed_text": B_Wed_text_ar, "Thur_text": B_Thur_text_ar, "Fri_text": B_Fri_text_ar, "Sat_text": B_Sat_text_ar, "Sun_text": B_Sun_text_ar },
      { "time_title": "晚上", "Mon_text": C_Mon_text_ar, "Tues_text": C_Tues_text_ar, "Wed_text": C_Wed_text_ar, "Thur_text": C_Thur_text_ar, "Fri_text": C_Fri_text_ar, "Sat_text": C_Sat_text_ar, "Sun_text": C_Sun_text_ar }]
    
      return sch_listData;
    }


    代码传图片太麻烦了,有需要的朋友去Git下载吧,

    GitHub地址

     

    小程序菜鸟,如果小小的踩坑经验能帮到你,记得给点小鼓励,谢谢支持~

    如果你感觉有收获,欢迎给我打赏 ———— 以激励我输出更多优质内容

     

    展开全文
  • 针对上期打卡需求开发,这期需要以列表的形式展现打卡记录,但是微信小程序并没有表格组件,可能是官方考虑到,在前端开发中,表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用,针对这个问题,...
  • 微信小程序模板下载_300多套精品模板,涵盖类型有:点餐,电商,视频,资讯,阅读,社交等等,满足各种小程序开发样式需求
  • 微信小程序(5)——如何制作好看的表格

    千次阅读 多人点赞 2022-02-08 10:56:18
    关键词:从“html的table”到 “微信小程序的table”、统一格式的表格、非统一格式的表格、对表格的点击操作、对表格的“增、删、改”操作。

    ✅ 因为 “表格” 在日常统计中无处不在,所以今天来做一做。但是微信小程序不支持 table 标签,我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。



    微信小程序开发 🌲

    上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

    下一篇文章链接: 🚧 🚧 …


    一、从“html的table”到 “微信小程序的table”

    HTML 表格:表格由 <table></table> 标签来定义。

    HTML 表格中的行:每个表格均有若干行,由 <tr></tr> 标签定义。(tr 是 table row 的缩写)

    HTML 表格中的行中的单元格:每行被分割为若干单元格,由 <td></td> 标签定义。(td 是 table data 的缩写)

    HTML 表格中的表头:即表格第一行的若干单元格(一般表格的第一行是一些 “项目名”), 由 <th></th>标签进行定义。(th 是 table head 的缩写)

    补充说明:“<td></td>” 中所装的东西,即是数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


    html 的 table 样例

    <table border="1" style="width:200px; text-align: center;">
        <tr>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
        <tr>
            <td>特朗普</td>
            <td>川普</td>
        </tr>
        <tr>
            <td>小w</td>
            <td>看足球</td>
        </tr>
    </table>
    

    浏览器中显示结果如下

    在这里插入图片描述

    如果将上述在代码放在微信小程序中显示结果如下

    在这里插入图片描述

    ● 这说明微信小程序不支持 table 组件。虽然不支持,但是我后面还是会沿用 “tabletrthtd” 这些已经耳熟能详的标签名,只不过这些名词变成了 “样式名”。



    二、统一格式的表格

    “统一格式” 的意思是:表格里面的 “表头” 中的每一个『单元格』的大小和样式一模一样,并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式一模一样。

    ● 我去官网找了部分 “2021年的博客之星” 来作为本次制作的表格的内容,其 “统一格式的表格框架” 如下:


    WXML 代码

    <view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>
    
    <view class="table">
        <!-- 表头(即第一行) -->
        <view class="tr">
            <view class="th">排名</view>
            <view class="th">用户昵称</view>
            <view class="th">技术领域</view>
            <view class="th">博主简介</view>
        
        </view>
        <!-- 表格第二行 -->
        <view class="tr">
            <view class="td">1</view>
            <view class="td">英雄哪里出来</view>
            <view class="td">人工智能与算法</view>
            <view class="td">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好,会用余生致力于将算法写得清晰、讲得明白。</view>
        </view>
    
        <!-- 表格第三行 -->
        <view class="tr">
            <view class="td">2</view>
            <view class="td">哪吒</view>
            <view class="td">后端开发</view>
            <view class="td">CSDN新星计划导师,博客专家,哪吒社区维护者,公众号【哪吒编程】维护者,专注Java干货分享。</view>
        </view>
        
        <!-- 表格第四行 -->
        <view class="tr">
            <view class="td">3</view>
            <view class="td">_陈哈哈</view>
            <view class="td">全栈开发</view>
            <view class="td">陈士杰,幽默爱笑的程序员,北漂五年。文章坚持“以用为本”,...。人生有味是清欢,我有故事,你有酒么?</view>
        </view>
    </view>
    

    WXSS 代码

    
    .table {
        display: flex;
        flex-direction: column;     /* 排列形式: 向下 */
        margin-top: 50px;
        margin-bottom: 50px;
    }
      
    .tr {
        display: flex;
        flex-direction: row;
    }
    
    .th, .td {  /* 公有的属性 */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* 自动换行 */
        width: 25%;					/* 4个25%相加刚好100% */
        text-align: center;         /* 文本居中 */
        justify-content:center;     /* 主轴居中 */
        align-items: center;        /* 交叉轴居中 */
        border-top: 1px solid #dadada;      /* 单元格上线框 */
        border-bottom: 1px solid #dadada;   /* 单元格下线框 */
        border-left: 1px solid #dadada;     /* 单元格左线框 */
        border-right: 1px solid #dadada;    /* 单元格右线框 */
    }
    
    .th {
        font-weight: 800;           /* 字体加重 */
        background-color:#B3CCF4;   /* 背景色 */
    }
    
    .td {
        background-color:#edf3e9;   /* 背景色 */
    }
    

    运行结果
    在这里插入图片描述
    “统一格式” 就体现在:“表头”都一样大,除“表头”外的单元格也是一样大。虽然这样编写代码很方便,但是这样会让屏幕感觉 “局部拥挤”,我们可能更希望,内容少的那一列的单元格有自己独立的样式。这样可能看上去 “松弛有度” 一点。



    三、非统一格式的表格

    “非统一格式” 的意思是:表格里面的 “表头” 中的每一个『单元格』的大小和样式可能不一样,并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式可能不一样。但是,表格中每一列的 “宽度” 一样

    ● 为了实现 “松弛有度”,我们还需要用到『滚动视图组件(scroll-view)』,用它来实现:左右拖动表格的功能

    ● 这是它的官方文档:『滚动视图组件(scroll-view)』,我们只需要在标签中把 scroll-x 属性设置为 true 即可。


    WXML 代码

    <view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>
    
    <scroll-view class="table" scroll-x="true">
        <!-- 表头(即第一行) -->
        <view class="tr">
            <view class="th_1">排名</view>
            <view class="th_2">用户昵称</view>
            <view class="th_3">技术领域</view>
            <view class="th_4">博主简介</view>
        
        </view>
        <!-- 表格第二行 -->
        <view class="tr">
            <view class="td_1">1</view>
            <view class="td_2">英雄哪里出来</view>
            <view class="td_3">人工智能与算法</view>
            <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好,会用余生致力于将算法写得清晰、讲得明白。</view>
        </view>
    
        <!-- 表格第三行 -->
        <view class="tr">
            <view class="td_1">2</view>
            <view class="td_2">哪吒</view>
            <view class="td_3">后端开发</view>
            <view class="td_4">CSDN新星计划导师,博客专家,哪吒社区维护者,公众号【哪吒编程】维护者,专注Java干货分享。</view>
        </view>
        
        <!-- 表格第四行 -->
        <view class="tr">
            <view class="td_1">3</view>
            <view class="td_2">_陈哈哈</view>
            <view class="td_3">全栈开发</view>
            <view class="td_4">陈士杰,幽默爱笑的程序员,北漂五年。文章坚持“以用为本”,...。人生有味是清欢,我有故事,你有酒么?</view>
        </view>
    </scroll-view>
    

    WXSS 代码

    .table {
        display: flex;
        flex-direction: column;     /* 排列形式: 向下 */
        margin-top: 50px;
        margin-bottom: 50px;
    }
      
    .tr {
        width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
        display: flex;
        flex-direction: row;
    }
    
    .th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* 自动换行 */
        text-align: center;         /* 文本居中 */
        justify-content:center;     /* 主轴居中 */
        align-items: center;        /* 交叉轴居中 */
        border-top: 1px solid #dadada;      /* 单元格上线框 */
        border-bottom: 1px solid #dadada;   /* 单元格下线框 */
        border-left: 1px solid #dadada;     /* 单元格左线框 */
        border-right: 1px solid #dadada;    /* 单元格右线框 */
    }
    
    .th_1, .th_2, .th_3, .th_4 {
        font-weight: 800;           /* 字体加重 */
        background-color:#B3CCF4;   /* 背景色 */
    }
    
    .td_1, .td_2, .td_3, .td_4 {
        background-color:#edf3e9;   /* 背景色 */
    }
    
    .th_1, .td_1 {
        width: 15%;
    }
    
    .th_2, .td_2 {
        width: 25%;
    }
    
    .th_3, .td_3 {
        width: 25%;
    }
    
    .th_4, .td_4 {
        width: 85%;
    }
    

    运行结果

    在这里插入图片描述



    四、对表格的点击操作

    ● 以上制作的表格都是 “静态的”,我们只能对它们进行 “读”,但有时候我们希望对它们进行 “写”。比如说:我们想点一点关注,那该怎么去做呢?

    ● 这时我们就要用在《微信小程序③——wxml+wxss+js基础入门[样例+解析]》中写到的 bindtap 了,我们这时就要引入 .js 文件。


    WXML 代码

    <view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>
    
    <scroll-view class="table" scroll-x="true">
        <!-- 表头(即第一行) -->
        <view class="tr">
            <view class="th_1">排名</view>
            <view class="th_2">用户昵称</view>
            <view class="th_3">技术领域</view>
            <view class="th_4">博主简介</view>
            <view class="th_5">是否关注</view>
        </view>
        <!-- 表格第二行 -->
        <view class="tr">
            <view class="td_1">1</view>
            <view class="td_2">英雄哪里出来</view>
            <view class="td_3">人工智能与算法</view>
            <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好,会用余生致力于将算法写得清晰、讲得明白。</view>
            <view bindtap="ChooseTap_1" class="td_5">
                <view wx:if="{{condtion_1}}">
                    <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
                </view>
            </view>
        </view>
    
        <!-- 表格第三行 -->
        <view class="tr">
            <view class="td_1">2</view>
            <view class="td_2">哪吒</view>
            <view class="td_3">后端开发</view>
            <view class="td_4">CSDN新星计划导师,博客专家,哪吒社区维护者,公众号【哪吒编程】维护者,专注Java干货分享。</view>
            <view bindtap="ChooseTap_2" class="td_5">
                <view wx:if="{{condtion_2}}">
                    <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
                </view>
            </view>
        </view>
        
        <!-- 表格第四行 -->
        <view class="tr">
            <view class="td_1">3</view>
            <view class="td_2">_陈哈哈</view>
            <view class="td_3">全栈开发</view>
            <view class="td_4">陈士杰,幽默爱笑的程序员,北漂五年。文章坚持“以用为本”,...。人生有味是清欢,我有故事,你有酒么?</view>
            <view bindtap="ChooseTap_3" class="td_5">
                <view wx:if="{{condtion_3}}">
                    <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
                </view>
            </view>
        </view>
    </scroll-view>
    

    WXSS 代码

    .table {
        display: flex;
        flex-direction: column;     /* 排列形式: 向下 */
        margin-top: 50px;
        margin-bottom: 50px;
    }
      
    .tr {
        width: 180%;    /* 15% + 25% + 25% + 85% + 30% = 180%*/
        display: flex;
        flex-direction: row;
    }
    
    .th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4, .th_5, .td_5 { /* 公有的属性 */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* 自动换行 */
        text-align: center;         /* 文本居中 */
        justify-content:center;     /* 主轴居中 */
        align-items: center;        /* 交叉轴居中 */
        border-top: 1px solid #dadada;      /* 单元格上线框 */
        border-bottom: 1px solid #dadada;   /* 单元格下线框 */
        border-left: 1px solid #dadada;     /* 单元格左线框 */
        border-right: 1px solid #dadada;    /* 单元格右线框 */
    }
    
    .th_1, .th_2, .th_3, .th_4, .th_5 {
        font-weight: 800;             /* 字体加重 */
        background-color:#B3CCF4;   /* 背景色 */
    }
    
    .td_1, .td_2, .td_3, .td_4, .td_5 {
        background-color:#edf3e9;   /* 背景色 */
    }
    
    .th_1, .td_1 {
        width: 15%;
    }
    
    .th_2, .td_2 {
        width: 25%;
    }
    
    .th_3, .td_3 {
        width: 25%;
    }
    
    .th_4, .td_4 {
        width: 85%;
    }
    
    .th_5, .td_5 {
        width: 30%;
    }
    
    .imgSet {       /* 图片的样式 */
        width: 40px;
        height: 40px;
    }
    

    JavaScript 代码

    Page({
    
        data: {
            condtion_1: false,
            condtion_2: false,
            condtion_3: false
        },
    
        ChooseTap_1(e) {		/* 关注第一行的作者 */
            var tmp = this.data['condtion_1'];
            if (tmp == false)
            {
                this.setData({
                    condtion_1: true
                })
            } else {
                this.setData({
                    condtion_1: false
                })
            }
        },
       
        ChooseTap_2(e) {	/* 关注第二行的作者 */
            var tmp = this.data['condtion_2'];
            if (tmp == false)
            {
                this.setData({
                    condtion_2: true
                })
            } else {
                this.setData({
                    condtion_2: false
                })
            }
        },
    
        ChooseTap_3(e) {	/* 关注第三行的作者 */
            var tmp = this.data['condtion_3'];
            if (tmp == false)
            {
                this.setData({
                    condtion_3: true
                })
            } else {
                this.setData({
                    condtion_3: false
                })
            }
        }
    })
    

    运行结果
    在这里插入图片描述



    五、对表格的“增、删、改”操作

    ● 如果我们要进行 “输入” 操作,那就要用到『输入组件(input)』,它的官方文档:『输入组件(input)』


    WXML 代码

    <view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>
    
    <scroll-view class="table" scroll-x="true">
        <!-- 表头(即第一行) -->
        <view class="tr">
            <view class="th_1">排名</view>
            <view class="th_2">用户昵称</view>
            <view class="th_3">技术领域</view>
            <view class="th_4">博主简介</view>
        </view>
        
        <!-- 表格第四行 -->
        <view wx:for="{{lists}}" wx:key="{{index}}">
            <view class="tr">
                <input class="td_1"></input>
                <input class="td_2"></input>
                <input class="td_3"></input>
                <input class="td_4"></input>
            </view>
        </view>
    
        <view class="button_box">
    		<button class='button_style' bindtap='add'>添加一行</button>
    		<button class='button_style' bindtap='del'>删除一行</button>
    	</view>
    </scroll-view>
    

    WXSS 代码

    .table {
        display: flex;
        flex-direction: column;     /* 排列形式: 向下 */
        margin-top: 50px;
        margin-bottom: 50px;
    }
      
    .tr {
        width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
        display: flex;
        flex-direction: row;
    }
    
    .th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* 自动换行 */
        text-align: center;         /* 文本居中 */
        justify-content:center;     /* 主轴居中 */
        align-items: center;        /* 交叉轴居中 */
        border-top: 1px solid #dadada;      /* 单元格上线框 */
        border-bottom: 1px solid #dadada;   /* 单元格下线框 */
        border-left: 1px solid #dadada;     /* 单元格左线框 */
        border-right: 1px solid #dadada;    /* 单元格右线框 */
    }
    
    .th_1, .th_2, .th_3, .th_4 {
        font-weight: 800;             /* 字体加重 */
        background-color:#B3CCF4;   /* 背景色 */
    }
    
    .td_1, .td_2, .td_3, .td_4 {
        height: 50px;
        background-color:#edf3e9;   /* 背景色 */
    }
    
    .th_1, .td_1 {
        width: 15%;
    }
    
    .th_2, .td_2 {
        width: 25%;
    }
    
    .th_3, .td_3 {
        width: 25%;
    }
    
    .th_4, .td_4 {
        width: 85%;
    }
    
    .button_box {
        margin-top: 30px;
        display: flex;
    }
    
    .button_style {
        width: 50%;
        color: cornflowerblue;
        background-color: rgb(233, 207, 186);
    }
    

    JavaScript 代码

    Page({
    
        data: {
            lists: [{},{},{}]    // 三个空行
        },
    
        add: function(){
            var lists = this.data.lists;
            var newData = {};
            lists.push(newData); // 实质是添加 lists[] 数组内容,使 for 循环多一次
            this.setData({
                lists: lists,
            })  
        },
    
        del: function () {
            var lists = this.data.lists;
            lists.pop();       // 实质是删除 lists[] 数组内容,使 for 循环少一次
            this.setData({
                lists: lists,
            })
        }
    })
    

    运行结果
    在这里插入图片描述

    结果说明
      ① 这个 “能增删改的表格” 巧妙地利用了『输入组件(input)』的功能,它所做的事情都只是在 “前端”,每次重新编译,所有的数据都将清零。
      ② 其实还有一种方法,让 “输入框” 和 “表格” 分离开来,这样的话,可能就可以使『单元格』里的内容能进行 “合理地换行和居中”,避免出现这种 “拖动单元格才能看到所有内容” 的情况。但这需要对 JavaScript 的语法、函数很熟悉,等到了后面,更了一篇关于它的 Blog 后再做吧



    六、参考附录

    [1] 《揭榜|2021年度“博客之星&新星”十佳博主出炉》,CSDN官方博客

    [2] 《微信小程序一秒学会制作table表格》,博主:开心大表哥

    [3] 《微信小程序点击添加/删除表单》,博主:暖一杯茶

    [4] 《微信小程序上实现 <table> 表格》,博主:亮子介

    [5] 《微信小程序table表格自定义组件实现》,博主:半度℃温热

    [6] 《微信小程序制作表格代码》,博主:huangmeimao

    [7] 《微信小程序的表格table》,博主:程序猿_小天

    [8]《微信小程序开发指南》,官方文档

    上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

    下一篇文章链接: 🚧 🚧 …


    ⭐️ ⭐️

    展开全文
  • 微信小程序WXSS样式全解

    千次阅读 多人点赞 2021-03-06 22:12:54
    字体 1.fornt:多个属性的简写 2.font-family:字体系列 3.font-size:字体尺寸 length:设置为一个固定的值 %:设置为基于父元素的一个百分比值 larger:设置为比父元素更大的尺寸 smaller:设置为比父元素更的尺寸...
  • 微信小程序表格前后台分页

    千次阅读 2022-04-24 14:28:30
    微信小程序表格前后台分页,包括一个前台示例一个后台示例,前台示例数据是直接放到data中的,可以自行调用自己的url接口,后台示例包括微信小程序以及springboot的数据
  • 小程序表组件微信小程序自定义组件-表组件-支持第三方npm包使用使用此组件需要依赖小程序基础库2.2.2版本,同时依赖开发者工具的npm构建。具体细节可查阅 。表组件实现了table的以下功能: 1.基础表格2.带斑马纹表格...
  • 微信小程序开发之——制作表格

    千次阅读 2021-11-11 14:24:38
    表格样式表格样式二 二 绘制过程 外层设置display:table,并设置border-collapse表格边框模型 表头设置display:table-row,单元格设置为display:table-cell 每一行单元格同表头设置 三 示例代码 3.1 ...
  • 微信小程序 table表格 PC版本

    千次阅读 2022-04-16 14:42:39
    所以要求可以通过小程序分享到微信,PC端登录微信,在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~ 实现:表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等... 先上效果图 (mock...
  • 前端使用input 来写radio,小程序使用radio标签 也可以使用单标签 1.自定义radio样式、 wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-...
  • 表格布局: <view class="table"> <view class="tr"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view&...
  • 同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入。补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分...
  • 微信小程序table表格自定义组件实现

    千次阅读 多人点赞 2020-10-22 17:16:22
    自定义样式配置项 columns 属性 类型 默认值 必填 说明 label String 是 表格标题 prop Array 是 表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件,若同时为多列设置了点击...
  • 前3个常规设置即可,这里说下第四个样式 可以看到,这边有个超出的圆角样式。 两种思路: 将整个父元素设置线性渐变色背景,上下两部分。 设置单个元素的伪元素,伪元素部分设置径向渐变 思路一: 为父元素设置...
  • 因为小程序不支持table,没办法只能通过组件递归的方式实现多级表头的渲染 ** PS:这里需要注意的是table-view组件一定要注册在app.json里面** ---------------这是实现后的样式--------------
  • 微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用 图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wxml,显示页面 <!--pages/...
  • 大家需要下载微信小程序weUI组件样式表的,可以自行去github上搜索weui.wxss,有个4K多star的就是完整的,直接复制下来就行,我这个就是从那复制的,如果不好搜索的也可以在我这里下载
  • 简易表单wxml界面代码与界面效果 文本框样式: 点击多列选择器,代码与效果如下: 多列选择器js代码:
  • 微信小程序——五十音图(截图+源码).zip 微信小程序——五十音图(截图+源码).zip 微信小程序——五十音图(截图+源码).zip 微信小程序——五十音图(截图+源码).zip 微信小程序——五十音图(截图+源码).zip ...
  • 微信小程序做Table表格

    千次阅读 2019-08-30 10:49:08
    实现效果:表格头部固定,表格内容数据可以滚动 这只是一个最基本的表格框架。 头部 <view class="table"> <view class="tr"> <view class="td">序号</view> <view class="td">...
  • 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到...
  • 简介:此项目是一个前后端分离的小demo,开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址:微信开发工具的使用和代码的结构及其含义参考后端业务逻辑...
  • 微信小程序之实现隔行变色表格

    千次阅读 2020-12-11 13:11:34
    微信小程序本身没有table标签,本博客使用view来模仿实现隔行变色表格的效果。
  • 微信小程序 自定义圆形进度条,具体如下:无图无真相,先上图:实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条。代码实现:JS代码:页面初始化 options为页面跳转所带来的参数},onReady: function () ...
  • 微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小...
  • 1.固定表头、表格行高由内容撑开 2.图片自适应居中、图片预览 3.筛选条件置顶、显示所选的筛选分类 4.触底加载下一页 5.表格文字可复制 6.支持手机横屏、竖屏切换。横屏时隐藏底部tabbar 上效果图 ...
  • 小程序 封装table 报表 支持双指缩放
  • 微信小程序】实现动态表格

    千次阅读 2020-02-14 10:19:19
    js文件 /** * 页面的初始数据 */ data: { listData:[ ], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this ... console.log(that.data.listData....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,472
精华内容 2,188
关键字:

微信小程序表格样式