微信小程序如何自定義table組件
更新時間：2019年06月29日 16:40:00 作者：甚時躍馬歸來
這篇文章主要介紹了微信小程序如何自定義table組件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
背景
最近想要搗鼓一個自己的小程序，其中數(shù)據(jù)展示部分比較多，想用table來做展示，但是微信小程序并沒有table組件，于是就自己動手搗鼓了一個，勉強能用。
可以看看效果：
etable使用介紹
etable的使用很簡單，分為 引入、使用、配置等3個階段
1、引入
首先在要使用的頁面中的json文件中配置如下：
{
"usingComponents": {
"etable" : "/compenents/etable/etable"
}
}
2、使用
在wxml頁面需要用到的地方使用，如下：
<view style='padding : 10rpx;'>
<etable config="{{config}}"></etable>
</view>
3、配置
配置階段主要配置config這個對象，這個對象中有這么幾個屬性，分別是
- content --etable數(shù)據(jù)，數(shù)組類型，必填
- titles --etable頭部標題，數(shù)組類型，必填
- props --etable每一列對應的數(shù)據(jù)的key值，
- columnWidths --etable 每一列的列寬，值類型使用rpx，注意：(titles,props,columnWidths這3個數(shù)組的長度需保持一致)
- border --etable 是否有邊框，Boolean類型，默認true
- stripe --etable 是否斑馬紋，Boolean類型，默認true
- headbgcolor --etable 標題欄的背景顏色，String類型，默認#ffffff(即白色)
如下示例代碼：
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
config:{
content :[],
titles: ['id', '名字', '年齡', '學校'],
props : ['id', 'name', 'age', 'school'],
columnWidths: ['80rpx', '140rpx', '120rpx','390rpx'],
border: true,
stripe : true,
// headcolor : '#dddddd'
}
},
onload:function(){
// 模擬數(shù)據(jù)
let content = [
{
id: 1,
name: 'pxh',
age: 13,
school: '暨南大學計算機'
},
{
id: 2,
name: 'ap',
age: 12,
school: '中山大學'
},
{
id: 3,
name: 'cf',
age: 12,
school: '華南農(nóng)業(yè)大學'
},
{
id: 4,
name: '林江',
age: 14,
school: '上海交通大學'
}
]
let that = this
// 此處是模擬網(wǎng)絡請求
setTimeout(function(){
that.setData({
'config.content' : content
})
},2000)
}
etable的stripe和border背景顏色修改
想要調(diào)整斑馬紋的背景顏色，找到etable/etable.wxss中的39-45行，如下，可以自行修改
.etable-content-row-bg1{
background-color: #ffffff;
}
.etable-content-row-bg2{
background-color: #efefef;
}
想要調(diào)整border的顏色，需要在etable.etable.wxss中分別找到etable-header-column-border 和 etable-content-column-border這2個類，然后修改對應的顏色值即可，此處不多說了。
組件的github地址
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Ionic3 UI組件之a(chǎn)utocomplete詳解
這篇文章主要為大家詳細介紹了Ionic3 UI組件之a(chǎn)utocomplete的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文通過實例代碼給大家介紹了基于js實現(xiàn)瀏覽上傳文件的代碼，非常不錯，代碼簡單易懂，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了JS正則驗證多個郵箱的方法,且郵箱字符串使用分號隔開,非常簡單實用,需要的朋友可以參考下2017-04-04
在開發(fā)網(wǎng)頁的過程中,經(jīng)常需要實現(xiàn)導航菜單的切換,下面這篇文章主要給大家介紹了關于前端導航欄不變切換局部頁面的3種方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-12-12
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實現(xiàn)字符串轉字符數(shù)組的兩種方式
在 JavaScript 的編程世界里,字符串和數(shù)組是極為常見的數(shù)據(jù)類型,在實際開發(fā)中,我們常常會遇到需要將字符串轉換為字符數(shù)組的情況,接下來,我們將深入探討如何使用 JavaScript 實現(xiàn)這一轉換,同時結合代碼示例詳細分析不同方法的特點,需要的朋友可以參考下2025-04-04
JS保留小數(shù)點(四舍五入、四舍六入)實現(xiàn)思路及實例
保留兩位小數(shù)：將浮點數(shù)四舍五入，取小數(shù)點后2位；如：2，會在2后面補上00.即2.00，感興趣的朋友看下具體的實現(xiàn)思路及代碼2013-04-04
這篇文章主要介紹了小程序多圖列表實現(xiàn)性能優(yōu)化的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了NodeJS Express框架中處理404頁面一個方式,原理就是把404路由放在最后匹配,也就是路由中沒有定義的全部轉到404頁面,需要的朋友可以參考下2014-05-05
Webpack path與publicPath的區(qū)別詳解
本篇文章主要介紹了Webpack path與publicPath的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05