您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)小程序怎么自定義table組件的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
背景
最近想要搗鼓一個(gè)自己的小程序,其中數(shù)據(jù)展示部分比較多,想用table來(lái)做展示,但是微信小程序并沒(méi)有table組件,于是就自己動(dòng)手搗鼓了一個(gè),勉強(qiáng)能用。
可以看看效果:
etable使用介紹
etable的使用很簡(jiǎn)單,分為 引入、使用、配置等3個(gè)階段
1、引入
首先在要使用的頁(yè)面中的json文件中配置如下:
{ "usingComponents": { "etable" : "/compenents/etable/etable" } }
2、使用
在wxml頁(yè)面需要用到的地方使用,如下:
<view style='padding : 10rpx;'> <etable config="{{config}}"></etable> </view>
3、配置
配置階段主要配置config這個(gè)對(duì)象,這個(gè)對(duì)象中有這么幾個(gè)屬性,分別是
content --etable數(shù)據(jù),數(shù)組類型,必填
titles --etable頭部標(biāo)題,數(shù)組類型,必填
props --etable每一列對(duì)應(yīng)的數(shù)據(jù)的key值,
columnWidths --etable 每一列的列寬,值類型使用rpx,注意:(titles,props,columnWidths這3個(gè)數(shù)組的長(zhǎng)度需保持一致)
border --etable 是否有邊框,Boolean類型,默認(rèn)true
stripe --etable 是否斑馬紋,Boolean類型,默認(rèn)true
headbgcolor --etable 標(biāo)題欄的背景顏色,String類型,默認(rèn)#ffffff(即白色)
如下示例代碼:
/** * 頁(yè)面的初始數(shù)據(jù) */ data: { config:{ content :[], titles: ['id', '名字', '年齡', '學(xué)校'], 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: '暨南大學(xué)計(jì)算機(jī)' }, { id: 2, name: 'ap', age: 12, school: '中山大學(xué)' }, { id: 3, name: 'cf', age: 12, school: '華南農(nóng)業(yè)大學(xué)' }, { id: 4, name: '林江', age: 14, school: '上海交通大學(xué)' } ] let that = this // 此處是模擬網(wǎng)絡(luò)請(qǐ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個(gè)類,然后修改對(duì)應(yīng)的顏色值即可,此處不多說(shuō)了。
感謝各位的閱讀!關(guān)于“小程序怎么自定義table組件”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。