<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        微信小程序如何自定義table組件

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:54:14
        文檔

        微信小程序如何自定義table組件

        微信小程序如何自定義table組件:背景 最近想要搗鼓一個自己的小程序,其中數(shù)據(jù)展示部分比較多,想用table來做展示,但是微信小程序并沒有table組件,于是就自己動手搗鼓了一個,勉強(qiáng)能用。 可以看看效果: etable使用介紹 etable的使用很簡單,分為 引入、使用、配置等3個階段 1、
        推薦度:
        導(dǎo)讀微信小程序如何自定義table組件:背景 最近想要搗鼓一個自己的小程序,其中數(shù)據(jù)展示部分比較多,想用table來做展示,但是微信小程序并沒有table組件,于是就自己動手搗鼓了一個,勉強(qiáng)能用。 可以看看效果: etable使用介紹 etable的使用很簡單,分為 引入、使用、配置等3個階段 1、

        背景

        最近想要搗鼓一個自己的小程序,其中數(shù)據(jù)展示部分比較多,想用table來做展示,但是微信小程序并沒有table組件,于是就自己動手搗鼓了一個,勉強(qiáng)能用。

        可以看看效果:

        etable使用介紹

        etable的使用很簡單,分為 引入、使用、配置等3個階段

        1、引入

        首先在要使用的頁面中的json文件中配置如下:

        {
        "usingComponents": {
        "etable" : "/compenents/etable/etable"
        }
        }

        2、使用

        在wxml頁面需要用到的地方使用,如下:

        <view style='padding : 10rpx;'>
        <etable config="{{config}}"></etable>
        </view>

        3、配置

        配置階段主要配置config這個對象,這個對象中有這么幾個屬性,分別是

      1. content --etable數(shù)據(jù),數(shù)組類型,必填
      2. titles --etable頭部標(biāo)題,數(shù)組類型,必填
      3. props --etable每一列對應(yīng)的數(shù)據(jù)的key值,
      4. columnWidths --etable 每一列的列寬,值類型使用rpx,注意:(titles,props,columnWidths這3個數(shù)組的長度需保持一致)
      5. border --etable 是否有邊框,Boolean類型,默認(rèn)true
      6. stripe --etable 是否斑馬紋,Boolean類型,默認(rèn)true
      7. headbgcolor --etable 標(biāo)題欄的背景顏色,String類型,默認(rèn)#ffffff(即白色)
      8. 如下示例代碼:

        /**
        * 頁面的初始數(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ī)'
        },
        {
        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ò)請求
        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個類,然后修改對應(yīng)的顏色值即可,此處不多說了。

        組件的github地址

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        微信小程序如何自定義table組件

        微信小程序如何自定義table組件:背景 最近想要搗鼓一個自己的小程序,其中數(shù)據(jù)展示部分比較多,想用table來做展示,但是微信小程序并沒有table組件,于是就自己動手搗鼓了一個,勉強(qiáng)能用。 可以看看效果: etable使用介紹 etable的使用很簡單,分為 引入、使用、配置等3個階段 1、
        推薦度:
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲综合久久1区2区3区 | 抽搐一进一出gif免费视频| 女人18毛片水最多免费观看| 91嫩草亚洲精品| 91情侣在线精品国产免费| 亚洲av成人综合网| 一二三四视频在线观看中文版免费 | 搡女人免费免费视频观看| 亚洲乱码国产一区三区| a级毛片高清免费视频就| 亚洲一区二区三区高清| 久久www免费人成看片| 亚洲三级中文字幕| 麻豆精品国产免费观看| 免费国产黄网站在线看| 国产亚洲精品看片在线观看| 国内少妇偷人精品视频免费| 亚洲永久永久永久永久永久精品| 91精品手机国产免费| 亚洲国产系列一区二区三区| 国产成人在线观看免费网站 | 黄网站免费在线观看| 2022年亚洲午夜一区二区福利| 国产成人免费在线| 亚洲精品无码av中文字幕| 亚洲成AV人在线观看网址| 国产精品网站在线观看免费传媒| 亚洲成a人片毛片在线| 成人永久免费高清| 99re6在线视频精品免费| 亚洲一区二区久久| 亚洲国产综合人成综合网站| 最近2022中文字幕免费视频| 朝桐光亚洲专区在线中文字幕| 一本久久a久久精品亚洲| 50岁老女人的毛片免费观看| 亚洲国产精品18久久久久久| 亚洲日产韩国一二三四区| 久久久久久国产a免费观看黄色大片| 蜜桃传媒一区二区亚洲AV| 久久精品国产亚洲av麻豆|