一秒學會微信小程序制作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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)簡易table表格
- 微信小程序?qū)崿F(xiàn)的繪制table表格功能示例
- 微信小程序中顯示html格式內(nèi)容的方法
- 微信小程序顯示下拉列表功能【附源碼下載】
- 微信小程序 實現(xiàn)列表項滑動顯示刪除按鈕的功能
- 微信小程序之多列表的顯示和隱藏功能【附源碼】
- 微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作示例
- 微信小程序設置全局請求URL及封裝wx.request請求操作示例
- 微信小程序使用wx.request請求服務器json數(shù)據(jù)并渲染到頁面操作示例
- 微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能示例
相關文章
如何利用原生JS實現(xiàn)圖片預覽加上傳(前后端交互)
在做網(wǎng)站系統(tǒng)時經(jīng)常會用到圖片上傳功能,用戶往往希望能看到自己上傳的圖片的樣子,下面這篇文章主要給大家介紹了關于如何利用原生JS實現(xiàn)圖片預覽加上傳,需要的朋友可以參考下2022-01-01JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄
: js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經(jīng)可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下2021-06-06