微信小程序> 微信小程序一秒学会制作table表格

微信小程序一秒学会制作table表格

浏览量:444 时间: 来源:开心大表哥

大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了。
效果图:
小程序
代码挺简单方便的:
wxml:

 <view class='history-table-wrap'>    <view class="table">      <view class="tr">          <view class="th th1">日期</view>          <view class="th th2">时间</view>          <view class="th th3">伤害</view>      </view>      <view class="tr" wx:for="{{15}}">          <view class="td td1">2018/02/12</view>          <view class="td td2">11:30</view>          <view class="td td3">本次对海煞造成了100000点伤害</view>      </view>    </view> </view>

wxss:

.history-table-wrap{  position: absolute;  width: 668rpx;  height: 578rpx;  left: 50%;  margin-left: -334rpx;  top: 70rpx;  overflow-y: scroll;  overflow-x: hidden;}/* 表格代码   */.table{  border:1px solid #dadada;  border-right:0;  border-bottom: 0;  width: 98%;  margin-left: 1%;}.tr{  width:100%;  display: flex;  justify-content: space-between;}.th,.td{  padding: 10px;  border-bottom: 1px solid #dadada;  border-right: 1px solid #dadada;  text-align: center;  width: 100%;}.th1,.th2,.td1,.td2{  width: 40%;}.th{  font-weight: 800;  background-color: #b66242;  font-size: 28rpx;  color: #330e0e;}.td{  font-size: 20rpx;  color: #ec9480;}
微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎