E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序一秒学会制作table表格
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏