小程序之自定義組件結(jié)合案例（會(huì)議OA的會(huì)議/投票管理及個(gè)人中心的搭建）詳解（4）

這篇具有很好參考價(jià)值的文章主要介紹了小程序之自定義組件結(jié)合案例（會(huì)議OA的會(huì)議/投票管理及個(gè)人中心的搭建）詳解（4）。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

小程序之自定義組件結(jié)合案例（會(huì)議OA的會(huì)議/投票管理及個(gè)人中心的搭建）詳解（4）,無紙化辦公小程序的開發(fā)使用,小程序,vue.js,mybatis,javascript,spring

????????????????????????????????????? ??? 小程序?qū)冢盒〕绦蜷_發(fā)專欄

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???個(gè)人主頁：個(gè)人主頁

一.前言

二.小程序自定義組件及其使用

2.1 自定義組件的使用

三.使用自定義組件完成會(huì)議功能界面的實(shí)現(xiàn)

? ?3.1 導(dǎo)航欄的實(shí)現(xiàn)

?3.2 會(huì)議界面內(nèi)容的實(shí)現(xiàn)?

?四.投票管理界面

五.個(gè)人中心

今天的分享就到這啦！??！

一.前言

? ? ? ? 繼上一篇文章的首頁搭建，今天來完成剩下的部分會(huì)議管理，投票管理及個(gè)人中心！?。?/p>

二.小程序自定義組件及其使用

????????官網(wǎng)：自定義組件 / 介紹 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

????????開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似。

2.1 自定義組件的使用

?右擊新建一個(gè)文件夾，創(chuàng)建一個(gè)component文件,只有Windows10會(huì)報(bào)，windows7不會(huì)，我們只要添加一個(gè)設(shè)置即可：

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

? ? ? ? 一個(gè)自定義組件由?json?wxml?wxss?js?4個(gè)文件組成。要編寫一個(gè)自定義組件，首先需要在?json?文件中進(jìn)行自定義組件聲明（將?component?字段設(shè)為?true?可將這一組文件設(shè)為自定義組件）：

{
  "component": true
}

在?wxss?文件中加入組件樣式

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

定義所需要的屬性：

接著要在頁面的?json?文件中進(jìn)行引用組件。此時(shí)需要提供自定義組件文件路徑：

{
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

效果：

三.使用自定義組件完成會(huì)議功能界面的實(shí)現(xiàn)

????????3.1 導(dǎo)航欄的實(shí)現(xiàn)

????????前端代碼，寫在了自定義組件中 tabs.wxml:

? ? ? ? 導(dǎo)航欄標(biāo)題的判斷選中的效果

<!-- 導(dǎo)航欄 -->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

導(dǎo)航欄的樣式 tabs.wxss:

/* 導(dǎo)航欄樣式 */
.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}

.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}

.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}

.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

在js里面定義屬性以及定義點(diǎn)擊的事件? ? tabs.js：

   /**
     * 組件的屬性列表
     */
    properties: {
        // 這里定義屬性，屬性值可以在組件使用時(shí)指定
        tabList:Object
  
    },

 /**
     * 組件的方法列表
     */
    methods: {
        // 導(dǎo)航欄的方法
        handleItemTap(e){
            // 獲取索引下標(biāo)
            const {index} = e.currentTarget.dataset;
            // 觸發(fā) 父組件的事件
            this.triggerEvent("tabsItemChange",{index})
            this.setData({
                tabIndex:index
            })
          }
    }

接著在會(huì)議文件夾中的前端中寫入 list.wxml：

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

接著導(dǎo)入，在上篇文章就已經(jīng)將所有的頁面已經(jīng)建好啦，現(xiàn)在只會(huì)寫入代碼即可在會(huì)議界面meeting的list.json導(dǎo)入：

    "usingComponents": {
        "tabs": "/components/tabs/tabs" 
    }

最后加入一些假數(shù)據(jù) list.js：

 /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        tabs:['已取消','進(jìn)行中','已結(jié)束','全部會(huì)議'],
}

效果：

?3.2 會(huì)議界面內(nèi)容的實(shí)現(xiàn) metting

前端代碼? list.wxml:

<!-- 設(shè)置與導(dǎo)航欄的間距 -->
<view style="height: 40px;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人報(bào)名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>

樣式設(shè)置 list.wxss：

/* 會(huì)議樣式 */
.mobi-title {
    font-size: 12pt;
    color: #777;
    line-height: 110%;
    font-weight: bold;
    width: 100%;
    padding: 15rpx;
    background-color: #f3f3f3;
}

.mobi-icon {
    padding: 0rpx 3rpx;
    border-radius: 3rpx;
    background-color: #ff7777;
    position: relative;
    margin-right: 10rpx;
}

/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
    margin-bottom: 5rpx;
    /* border-radius: 20rpx;
    box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

.list-img {
    display: flex;
    margin: 10rpx 10rpx;
    width: 150rpx;
    height: 220rpx;
    justify-content: center;
    align-items: center;
}

.list-img .video-img {
    width: 120rpx;
    height: 120rpx;
    
}

.list-detail {
    margin: 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 220rpx;
}

.list-title text {
    font-size: 11pt;
    color: #333;
    font-weight: bold;
}

.list-detail .list-tag {
    display: flex;
    height: 70rpx;
}

.list-tag .state {
    font-size: 9pt;
    color: #81aaf7;
    width: 120rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .join {
    font-size: 11pt;
    color: #bbb;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .list-num {
    font-size: 11pt;
    color: #ff6666;
}

.list-info {
    font-size: 9pt;
    color: #bbb;
    margin-top: 20rpx;
}
.bottom-line{
    display: flex;
    height: 60rpx;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}
.bottom-line text{
    font-size: 9pt;
    color: #666;
}

導(dǎo)入后臺假數(shù)據(jù)：

根據(jù)導(dǎo)航欄的不同狀態(tài)，各自寫了一個(gè)數(shù)組數(shù)據(jù)? list.js：

 /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        tabs:['已取消','進(jìn)行中','已結(jié)束','全部會(huì)議'],
        lists: [
            {
              'id': '1',
              'image': '/static/persons/1.jpg',
              'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
              'num':'304',
              'state':'進(jìn)行中',
              'time': '10月09日 17:59',
              'address': '深圳市·南山區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/2.jpg',
              'title': 'AI WORLD 2016世界人工智能大會(huì)',
              'num':'380',
              'state':'進(jìn)行中',
              'time': '10月09日 17:39',
              'address': '北京市·朝陽區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/3.jpg',
              'title': 'H100太空商業(yè)大會(huì)',
              'num':'500',
              'state':'已取消',
              'time': '10月09日 17:31',
              'address': '大連市'
            },
            {
              'id': '1',
              'image': '/static/persons/4.jpg',
              'title': '報(bào)名年度盛事，大咖云集！2016鳳凰國際論壇邀您“與世界對話”',
              'num':'150',
              'state':'進(jìn)行中',
              'time': '10月09日 17:21',
              'address': '北京市·朝陽區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/5.jpg',
              'title': '新質(zhì)生活 · 品質(zhì)時(shí)代 2016消費(fèi)升級創(chuàng)新大會(huì)',
              'num':'217',
              'state':'已結(jié)束',
              'time': '10月09日 16:59',
              'address': '北京市·朝陽區(qū)'
            }
          ],
          lists1: [
            {
              'id': '1',
              'image': '/static/persons/1.jpg',
              'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
              'num':'304',
              'state':'進(jìn)行中',
              'time': '10月09日 17:59',
              'address': '深圳市·南山區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/2.jpg',
              'title': 'AI WORLD 2016世界人工智能大會(huì)',
              'num':'380',
              'state':'進(jìn)行中',
              'time': '10月09日 17:39',
              'address': '北京市·朝陽區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/3.jpg',
              'title': 'H100太空商業(yè)大會(huì)',
              'num':'500',
              'state':'進(jìn)行中',
              'time': '10月09日 17:31',
              'address': '大連市'
            }
          ],
          lists2: [ 
            {
              'id': '1',
              'image': '/static/persons/1.jpg',
              'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
              'num':'304',
              'state':'已結(jié)束',
              'time': '10月09日 17:59',
              'address': '深圳市·南山區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/2.jpg',
              'title': 'AI WORLD 2016世界人工智能大會(huì)',
              'num':'380',
              'state':'已結(jié)束',
              'time': '10月09日 17:39',
              'address': '北京市·朝陽區(qū)'
            }
          ],
          lists3: [
            {
              'id': '1',
              'image': '/static/persons/1.jpg',
              'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
              'num':'304',
              'state':'已取消',
              'time': '10月09日 17:59',
              'address': '深圳市·南山區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/2.jpg',
              'title': 'AI WORLD 2016世界人工智能大會(huì)',
              'num':'380',
              'state':'已取消',
              'time': '10月09日 17:39',
              'address': '北京市·朝陽區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/3.jpg',
              'title': 'H100太空商業(yè)大會(huì)',
              'num':'500',
              'state':'已取消',
              'time': '10月09日 17:31',
              'address': '大連市'
            },
            {
              'id': '1',
              'image': '/static/persons/4.jpg',
              'title': '報(bào)名年度盛事，大咖云集！2016鳳凰國際論壇邀您“與世界對話”',
              'num':'150',
              'state':'已取消',
              'time': '10月09日 17:21',
              'address': '北京市·朝陽區(qū)'
            },
            {
              'id': '1',
              'image': '/static/persons/5.jpg',
              'title': '新質(zhì)生活 · 品質(zhì)時(shí)代 2016消費(fèi)升級創(chuàng)新大會(huì)',
              'num':'217',
              'state':'已取消',
              'time': '10月09日 16:59',
              'address': '北京市·朝陽區(qū)'
            }
          ]
    },

改變導(dǎo)航欄頁面的數(shù)據(jù)，根據(jù)會(huì)議狀態(tài)做一個(gè)簡單判斷? ?list.js：

// 導(dǎo)航欄改變事件，改變值
    tabsItemChange(e){
        let tolists;
        if(e.detail.index==1){
            tolists = this.data.lists1;
        }else if(e.detail.index==2){
            tolists = this.data.lists2;
        }else if(e.detail.index==0){
            tolists = this.data.lists3;
        }else{
            tolists = this.data.lists;
        }
        this.setData({
            lists: tolists
        })
    },

效果：

?四.投票管理界面 vote

前端代碼：

<!-- 導(dǎo)航欄 -->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<!-- 設(shè)置與導(dǎo)航欄的間距 -->
<view style="height: 40px;"></view>
<block wx:for-items="{{vote1}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text><text class="state">{{item.state}}</text>   </view>
           
            <view class="list-tag">
                <view class="join"> 參與投票人數(shù): <text class="list-num">{{item.sum}}</text></view>
                <view class="join">已經(jīng)投票人數(shù): <text class="list-num">{{item.num}}</text></view>
            </view>
       
            <view class="list-info">投票截止時(shí)間: <text>{{item.time}}</text></view>
        </view>
    </view>
</block>

樣式設(shè)計(jì)：

/* pages/vote/list/list.wxss */
/* 會(huì)議樣式 */
/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #cac7c7;
    background-color: rgb(253, 244, 244);
    margin-bottom: 5rpx;
   
}
.list-title{
    color: rgb(219, 85, 23);
    font-weight: 1000;
    font-size: smaller;
    display: flex;
    margin: 20rpx 10rpx;
    /* width: 300rpx;
    height: 120rpx; */
    /* justify-content: center; */
    align-items: center;
}
.join{
    font-size: smaller;
    font-size: 11pt;
    color: rgb(85, 79, 79);
    margin-left: -300rpx;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.list-num{
    font-weight: 680;
    color: red;
}
.state {
    font-size: 9pt;
    color: #81aaf7;
    width: 180rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list-info {
    font-size: 9pt;
    color: rgb(17, 16, 16);
    margin-top: 20rpx;
    margin-left: 150px;
}

引入自定義標(biāo)簽：

{
    "usingComponents": {
        "tabs": "/components/tabs/tabs"
    }
}

定義一些假數(shù)據(jù)：

  /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        tabs:['待投票','歷史投票','已投票'],
        vote1: [
            {
              'id': '1',
              'title': '【關(guān)于罷免張三的董事長職位】',
              'sum':'16人',
              'state':'還未進(jìn)行投票',
              'time': '10月09日 17:59',
              'num': '10人'
            },
            {
              'id': '1',
              'title': '【世界人工智能大會(huì)是否上市】',
              'sum':'20人',
              'state':'還未進(jìn)行投票',
              'time': '10月09日 17:39',
              'num': '7人'
            },
            {
              'id': '1',
              'title': '【H100太空商業(yè)大會(huì)是否召開】',
              'sum':'24人',
              'state':'還未進(jìn)行投票',
              'time': '10月09日 17:31',
              'num': '21人'
            },
            {
              'id': '1',
              'title': '【關(guān)于李四的升職董事長的投票】',
              'sum':'10人',
              'state':'還未進(jìn)行投票',
              'time': '10月09日 17:21',
              'num': '2人'
            }
          ],
          vote2: [
            {
              'id': '1',
            'title': '【關(guān)于公司是否支持空降總監(jiān)的會(huì)議】',
              'sum':'23人',
              'state':'同意',
              'time': '10月09日 17:59',
              'num': '23人'
            },
            {
              'id': '1',
              'title': '【2016世界人工智能大會(huì)是否召開】',
              'sum':'23人',
              'state':'不同意',
              'time': '10月09日 17:39',
              'num': '23人'
            },
            {
              'id': '1',
              'title': '【H100太空商業(yè)大會(huì)是否召開】',
              'sum':'23人',
              'state':'棄權(quán)',
              'time': '10月09日 17:39',
              'num': '23人'
            }
          ],
          vote3: [ 
            {
              'id': '1',
              'title': '【關(guān)于王五的罷免的投票】',
              'sum':'34人',
              'state':'棄權(quán)',
              'time': '10月09日 17:59',
              'num': '31人'
            },
            {
              'id': '1',
              'title': '【2016世界人工智能大會(huì)的召開】',
              'sum':'34人',
              'state':'同意',
              'time': '10月09日 17:59',
              'num': '31人'
            },{
                'id': '1',
                'title': '【關(guān)于王五的罷免的投票】',
                'sum':'34人',
                'state':' 不同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },
              {
                'id': '1',
                'title': '【2016世界人工智能大會(huì)的召開】',
                'sum':'34人',
                'state':'同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },{
                'id': '1',
                'title': '【關(guān)于王五的罷免的投票】',
                'sum':'34人',
                'state':'同意',
                'time': '10月09日 17:59',
                'num': '31人'
              },
              {
                'id': '1',
                'title': '【世界人工智能大會(huì)的召開】',
                'sum':'34人',
                'state':'棄權(quán)',
                'time': '10月09日 17:59',
                'num': '31人'
              }
          ]
    },

導(dǎo)航欄改變事件：

// 導(dǎo)航欄改變事件，改變值
 tabsItemChange(e){
    let tolists;
    if(e.detail.index==0){
        tolists = this.data.vote1;
    }else if(e.detail.index==1){
        tolists = this.data.vote2;
    }else if(e.detail.index==2){
        tolists = this.data.vote3;
    }
    this.setData({
        vote1: tolists
    })
},

效果：

五.個(gè)人中心

前端代碼 ucenter：

<view class="user">
    <image class="user-img" src="/static/persons/jennie1.jpg"></image>
    <view class="user-name">瀟灑姿</view>
    <view class="user-oper">修改</view>
</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我主持的會(huì)議</view>
        <view class="item-num">10</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我參與的會(huì)議</view>
        <view class="item-num">7</view>
        <view class="item-oper">></view>
    </view>

</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我發(fā)布的投票</view>
        <view class="item-num">6</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">我參與的投票</view>
        <view class="item-num">8</view>
        <view class="item-oper">></view>
    </view>

</view>
<view class="info">
    <view class="item1">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">消息</view>
        <view class="item-num">1</view>
        <view class="item-oper">></view>
    </view>
    <view class="item2">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <view class="item-title">設(shè)置</view>
        <view class="item-num">10</view>
        <view class="item-oper">></view>
    </view>

</view>

樣式設(shè)計(jì)：

/* pages/ucenter/index/index.wxss */
.user{
    display: flex;
    align-items: center;
    border-bottom: 8px solid rgb(236, 216, 219);
}
.user-img{
    width: 75px;
    height: 75px;
    margin: 10px;
}
.user-name{
    font-weight: 900;
    margin: 0 200rpx 0 50rpx;
    margin-left: 10px;
    color: palevioletred;
}
.user-oper{
    color: grey;
    width: 40px;
    margin-left: 10px;
}
.item-icon{
    width: 34px;
    height: 34px;
}
.item1,.item2{
padding: 5px;
display: flex;
align-items: center;
}
.item-title{
    width: 550rpx;

}
.item-num{
    
    color:rgb(231, 188, 217);
}
.item1{
    border-bottom: 1px solid rgb(236, 216, 219);
}
.item2{
    border-bottom: 5px solid rgb(236, 216, 219);
}
.item-oper{
    font-weight: 800;
   margin-left: 10px;
   width: 20px;
   color:rgb(100, 76, 84)

}

效果:

小程序之自定義組件結(jié)合案例（會(huì)議OA的會(huì)議/投票管理及個(gè)人中心的搭建）詳解（4）,無紙化辦公小程序的開發(fā)使用,小程序,vue.js,mybatis,javascript,spring 文章來源地址http://www.zghlxwxcb.cn/news/detail-745723.html

今天的分享就到這啦！??！

到了這里，關(guān)于小程序之自定義組件結(jié)合案例（會(huì)議OA的會(huì)議/投票管理及個(gè)人中心的搭建）詳解（4）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！