小程序表格

作者: 授之以渔不如授之以鱼 | 来源:发表于2019-06-04 12:11 被阅读0次

小程序表格
小程序表格
小程序表格渲染
小程序实战入门009---小程序表格实现，小程序table实现
3个微信表格小程序盘点，告诉你怎么用
微信小程序性能优化实践
小程序canvas绘制表格
即构ZEGO推出小程序互动直播方案，与iOS&安卓APP
微信小程序里面自定义table表格
微软AI识图：拍照“还原盗取”别人PPT

两个Item-level如果想对last-child设置样式是不可以的，因为他后面后面还有个空兄弟节点。
设置first-child伪类时我们看第一个的前面有没有兄弟节点，
设置last-child伪类时看最后一个有没有兄弟节点。
所以要设置这种伪类时如果没有起到效果，我们可以先看一下他有没有同级的兄弟节点。
解决办法：是我们可以把Item-level用一个容器包起来再设置。

<view class="table">
  <view class='table-title'>会员奖励和升级规则:</view>
  <block wx:for="{{listData1}}" wx:key="{[index]}">
    <view class='{{index==2? "content1":"content0"}}'>
      <view style='display:flex;flex-direction:column;' class='cell1'>
       <view><view class='cell1'>{{item.level}}</view></view>
       <view><view class='cell1'>{{item.level2}}</view></view>
      </view>
      <view class="cell1">{{item.vip_1_name}}</view>
      <view class="cell1">{{item.vip_2_name}}</view>
      <view class="cell1">{{item.vip_3_name}}</view>
      <view class="cell1">{{item.vip_4_name}}</view>
      <view class="cell1">{{item.vip_5_name}}</view>
      <view class="cell1">{{item.vip_6_name}}</view>
    </view>
  </block>
</view>




<view class="table">
  <view class='table-title'>参考:</view>
  <view class="textexample">举例：假如有件商品原价98元，优惠券50元，券后价48元，基础补贴为10元 </view>
  <block wx:for="{{listData2}}" wx:key="{[index]}">
    <view class='{{index==3? "content3":"content2"}}'>
      <view style='display:flex;flex-direction:column;' class='cell2'>
       <view class='cell2'>{{item.level}}</view>
       <view class='cell2'>{{item.level2}}</view>
      </view>
      <view class="cell2">{{item.vip_1_name}}</view>
      <view class="cell2">{{item.vip_2_name}}</view>
      <view class="cell2">{{item.vip_3_name}}</view>
      <view class="cell2">{{item.vip_4_name}}</view>
      <view class="cell2">{{item.vip_5_name}}</view>
      <view class="cell2">{{item.vip_6_name}}</view>
      <view class="cell2">{{item.remarks}}</view>
    </view>
  </block>
</view>

    listData1: [{
      "level": "会员等级",
      "vip_1_name": "会员",
      "vip_2_name": "铁牌",
      "vip_3_name": "铜牌",
      "vip_4_name": "银牌",
      "vip_5_name": "金牌",
      "vip_6_name": "钻石",
      "remarks": ""
    }, {
      "level": "高佣奖励",
      "vip_1_name": "110%",
      "vip_2_name": "120%",
      "vip_3_name": "140%",
      "vip_4_name": "160%",
      "vip_5_name": "180%",
      "vip_6_name": "200%",
    }, {
      "vip_name": '会员',
      "level": "会员升级条件",
      "level2": "累计购买单数",
      "vip_1_name": "1",
      "vip_2_name": "5",
      "vip_3_name": "20",
      "vip_4_name": "40",
      "vip_5_name": "70",
      "vip_6_name": "100",
    }],
    listData2: [{
        "level": "会员等级",
        "vip_1_name": "会员",
        "vip_2_name": "铁牌",
        "vip_3_name": "铜牌",
        "vip_4_name": "银牌",
        "vip_5_name": "金牌",
        "vip_6_name": "钻石",
        "remarks": "备注说明"
      },

      {
        "vip_name": '会员',
        "level": "基础补贴",
        "vip_1_name": "10",
        "vip_2_name": "10",
        "vip_3_name": "10",
        "vip_4_name": "10",
        "vip_5_name": "10",
        "vip_6_name": "10",
        "remarks": "元"
      }, {
        "vip_name": '会员',
        "level": "高佣奖励",
        "vip_1_name": "110%",
        "vip_2_name": "120%",
        "vip_3_name": "140%",
        "vip_4_name": "160%",
        "vip_5_name": "180%",
        "vip_6_name": "200%",
        "remarks": "占基础补贴比例"
      }, {
        "vip_name": '会员',
        "level": "会员升级条件",
        "level2": "（累计购买单数）",
        "vip_1_name": "1",
        "vip_2_name": "5",
        "vip_3_name": "20",
        "vip_4_name": "40",
        "vip_5_name": "70",
        "vip_6_name": "100",
        "remarks": "单"
      }, {
        "vip_name": '会员',
        "level": "实际获得奖励",
        "vip_1_name": "11",
        "vip_2_name": "12",
        "vip_3_name": "14",
        "vip_4_name": "16",
        "vip_5_name": "18",
        "vip_6_name": "20",
        "remarks": "元"
      },

    ],
    listData3: [{
      "level": "会员升级条件",
      "level2": "（累计购买单数）",
      "vip_1_name": "1",
      "vip_2_name": "5",
      "vip_3_name": "20",
      "vip_4_name": "40",
      "vip_5_name": "70",
      "vip_6_name": "100"
    }]
  },


.table-title {
  padding-left: 20rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(73, 73, 73, 1);
  background: rgb(255, 255, 255);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

/* 例如文字说明 */

.textexample {
  padding-left: 48rpx;
  padding-top: 11rpx;
  font-size: 18rpx;
  font-weight: 400;
  color: rgba(237, 15, 15, 0.65);
  background: rgb(255, 255, 255);
  height: 46rpx;
  line-height: 46rpx;
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

/* 白色背景表格 */

.table {
  margin: 10rpx 14rpx;
  padding: 15rpx 15rpx 37rpx 15rpx;
  background: rgb(255, 255, 255);
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(196, 196, 196, 0.5);
  border-radius: 8rpx;
}

/* 第一个表 */

.cell1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 92rpx;
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

.content0 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 46rpx;
  line-height: 46rpx;
  font-size: 14rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content1 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 67rpx;
  line-height: 31rpx;
  font-size: 14rpx;
  display: flex;
  justify-content: center;
}

.content0 .cell1:first-child {
  width: 171rpx;
  border-bottom: none;
  border: 1rpx solid rgb(25, 199, 97);
}

.content1 .cell1:first-child {
  width: 171rpx;
  border-bottom: none;
  border: 1rpx solid rgb(27, 164, 206);
}

/* 第二个表 */

.cell2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 12%;
  border-right: 1rpx solid rgba(218, 217, 217, 1);
  border-bottom: 1rpx solid rgba(218, 217, 217, 1);
}

.content2 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 46rpx;
  line-height: 46rpx;
  font-size: 14rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content3 {
  border-left: 1rpx solid rgba(218, 217, 217, 1);
  height: 67rpx;
  line-height: 33rpx;
  font-size: 14rpx;
  display: flex;
  justify-content: center;
}

.content2 .cell2:first-child {
  width: 138rpx;
  border-bottom: none;
}

.content2 .cell2:last-child {
  width: 138rpx;
}

.content3 .cell2:first-child {
  width: 138rpx;
  border-bottom: none;
}

.content3 .cell2:last-child {
  width: 138rpx;
}

QQ截图20190604121044.png

小程序表格
实现效果1 WXML WXSS 实现效果2 WXML WXSS
小程序表格
两个Item-level如果想对last-child设置样式是不可以的，因为他后面后面还有个空兄弟节点。设置fir...
小程序表格渲染
小程序原生没有table组件，我实现了一个，用法和ant Design相同，但目前仅支持两个字段，后续有需要再完善...
小程序实战入门009---小程序表格实现，小程序table实现
小程序默认是不支持table表格的，如果我们想实现小程序表格效果，就得自己拼凑。实现方案有很多，不过个人感觉通过f...
3个微信表格小程序盘点，告诉你怎么用
微信小程序是我们日常生活中很便捷的工具，你甚至可以用它来制作日常或工作表格。那么有哪些知名的表格小程序呢？ 1.E...
微信小程序性能优化实践
历史回顾：微信小程序自定义组件 - 表格组件来啦通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包，...
小程序canvas绘制表格
前段时间接到一个项目，需要用canvas来绘制表格。看起来很复杂，其实重要的是要缕清思路，根据后台返回的数据，计算...
即构ZEGO推出小程序互动直播方案，与iOS&安卓APP
2017年12 月 26 日，微信小程序正式对外开放了实时音视频录制及播放能力。符合类目要求（见下方表格）的小程序...
微信小程序里面自定义table表格
微信小程序里面自定义table表格 wxss: .table{ border:1px solid #dadada...
微软AI识图：拍照“还原盗取”别人PPT
这个微信小程序，第一吸引我的，是可以对别人的PPT 、表格拍照，直接还原成为 PPT（文字版，可以再编辑）、表格（...