一秒學(xué)會(huì)微信小程序制作table表格

更新時(shí)間：2019年02月14日 16:09:13 作者：gqj.cn

這篇文章主要教大家一秒學(xué)會(huì)微信小程序制作table表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大家都知道微信小程序自身沒(méi)有提供表格這個(gè)組件，但是今天的項(xiàng)目需求又出現(xiàn)了，所以只能模仿一個(gè)了。

效果圖：

代碼挺簡(jiǎn)單方便的：

wxml:

 <view class='history-table-wrap'>
  <view class="table">
   <view class="tr">
     <view class="th th1">日期</view>
     <view class="th th2">時(shí)間</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">本次對(duì)海煞造成了100000點(diǎn)傷害</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;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript自定義日歷實(shí)現(xiàn)簽到功能
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義日歷實(shí)現(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
開(kāi)發(fā) Internet Explorer 右鍵功能表(ContextMenu)
本篇介紹如何開(kāi)發(fā) Internet Explorer 右鍵功能表(ContextMenu)，以 0rz.tw 縮短網(wǎng)址列為范例
2013-07-07
JS數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)(示例詳解)
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)出現(xiàn)接口返回整個(gè)數(shù)組，我們需要將數(shù)組進(jìn)行二次處理,這篇文章主要介紹了js?數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu),需要的朋友可以參考下
2023-11-11
用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼
本文給大家介紹了使用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2007-11-11
uniapp發(fā)送formdata表單請(qǐng)求2種方法(全網(wǎng)最簡(jiǎn)單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請(qǐng)求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù)，以及refresh更新數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
不刷新網(wǎng)頁(yè)就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁(yè)就能鏈接新的js文件方法總結(jié)，需要的朋友們參考下。
2020-03-03
純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間的相關(guān)資料,需要的朋友可以參考下
2017-10-10
淺談javascript函數(shù)式編程
你是否知道JavaScript其實(shí)也是一個(gè)函數(shù)式編程語(yǔ)言呢？本文將教你如何利用JavaScript的函數(shù)式特性。
2015-09-09
JS 分號(hào)引起的一段調(diào)試問(wèn)題
看看執(zhí)行后有什么效果,無(wú)論textbox1.text是什么值,都會(huì)時(shí)放條件判斷.為什么呢
2009-06-06