欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一秒學會微信小程序制作table表格

 更新時間：2019年02月14日 16:09:13   作者：gqj.cn  
這篇文章主要教大家一秒學會微信小程序制作table表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果圖：

代碼挺簡單方便的：

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;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript模擬數(shù)組合并concat

    JavaScript模擬數(shù)組合并concat

    這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • 如何利用原生JS實現(xiàn)圖片預覽加上傳(前后端交互)

    如何利用原生JS實現(xiàn)圖片預覽加上傳(前后端交互)

    在做網(wǎng)站系統(tǒng)時經(jīng)常會用到圖片上傳功能,用戶往往希望能看到自己上傳的圖片的樣子,下面這篇文章主要給大家介紹了關(guān)于如何利用原生JS實現(xiàn)圖片預覽加上傳,需要的朋友可以參考下
    2022-01-01
  • JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名

    JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名

    本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • Position屬性之relative用法

    Position屬性之relative用法

    Relative是position的一個屬性，是相對定位，通過本篇文章給大家介紹Position屬性之relative用法，對position屬性relative相關(guān)知識感興趣的朋友一起學習吧
    2015-12-12
  • 簡述JS瀏覽器的三種彈窗

    簡述JS瀏覽器的三種彈窗

    本文給大家簡單介紹了JS瀏覽器的三種彈窗，簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-07-07
  • layui中的switch開關(guān)實現(xiàn)方法

    layui中的switch開關(guān)實現(xiàn)方法

    今天小編就為大家分享一篇layui中的switch開關(guān)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面

    微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄

    JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄

    : js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經(jīng)可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下
    2021-06-06
  • JS使用cookie設置樣式的方法

    JS使用cookie設置樣式的方法

    這篇文章主要介紹了JS使用cookie設置樣式的方法,涉及javascript樣式的設置與cookie的讀寫相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • js不能獲取隱藏的div的寬度只能先顯示后獲取

    js不能獲取隱藏的div的寬度只能先顯示后獲取

    js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來，再獲取其寬度，計算位置，下面的示例，大家可以參考下
    2014-09-09

最新評論