• 微信小程序开发的OA会议之会议，投票，个人中心的页面搭建及模板，还有自定义组件的学习

    目录

    一、自定义组件

             1. 创建 

    2. 定义 

    3. 编写

    4. 使用

    二、会议

    1. 数据

    2. 显示 

    3. 样式

    三、个人中心

    1. 页面

    2. 样式

    四、投票

    1. 引用

    2. 数据

    3. 页面

    4. 样式

    每篇收获

    一、自定义组件

    开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

    以下的代码都基于我博客中的 : 微信小程序开发的OA会议之首页搭建icon-default.png?t=N7T8https://blog.csdn.net/SAME_LOVE/article/details/133886706?spm=1001.2014.3001.5501

    1. 创建 

    在项目中创建一个名为 : components 的文件，来存放组件

    再在components文件夹中创建一个组件，名为 : tabs ，创建操作如图 : 

     2. 定义 

    类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

    在 tabs.json 中编写: 

    1. {
    2.   "component": true,
    3.   "usingComponents": {}
    4. }

    同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

    3. 编写

    在 tabs.wxml 中进行编写模板:

    4. <view class="tabs">
    5.     <view class="tabs_title">
    6.         <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
    7.             <view style="margin-bottom:5rpx">{{item}}view>
    8.             <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}">view>
    9.         view>
    10.     view>
    11.     <view class="tabs_content">
    12.         <slot>slot>
    13.     view>
    14. view>

    在 tabs.js 中进行编写功能 :

    1. // components/tabs/tabs.js
    2. Component({
    3.  
    4.   /**
    5.    * 组件的属性列表
    6.    */
    7.   properties: {
    8.  // 这里定义了innerText属性，属性值可以在组件使用时指定
    9.  innerText: {
    10.   type: String,
    11.   value: 'default value'
    12. },
    13. tabList:Object
    14.   },
    15.  
    16.   /**
    17.    * 组件的初始数据
    18.    */
    19.   data: {
    20.     tabIndex:1
    21.   },
    22.  
    23.   /**
    24.    * 组件的方法列表
    25.    */
    26.   methods: {
    27.     handleItemTap(e){
    28.       // 获取索引
    29.       const {index} = e.currentTarget.dataset;
    30.       
    31.       // 触发 父组件的事件
    32.       this.triggerEvent("tabsItemChange",{index})
    33.       this.setData({
    34.           tabIndex:index
    35.       })
    36.     }
    37.   }
    38. })

    在 tabs.wxss 中进行编写样式:

    1. .tabs {
    2.   position: fixed;
    3.   top: 0;
    4.   width: 100%;
    5.   background-color: #fff;
    6.   z-index: 99;
    7.   border-bottom: 1px solid #efefef;
    8.   padding-bottom: 20rpx;
    9. }
    10.  
    11. .tabs_title {
    12.   /* width: 400rpx; */
    13.   width: 90%;
    14.   display: flex;
    15.   font-size: 9pt;
    16.   padding: 0 20rpx;
    17. }
    18.  
    19. .title_item {
    20.   color: #999;
    21.   padding: 15rpx 0;
    22.   display: flex;
    23.   flex: 1;
    24.   flex-flow: column nowrap;
    25.   justify-content: center;
    26.   align-items: center;
    27. }
    28.  
    29. .item_active {
    30.   /* color:#ED8137; */
    31.   color: #000000;
    32.   font-size: 11pt;
    33.   font-weight: 800;
    34. }
    35.  
    36. .item_active1 {
    37.   /* color:#ED8137; */
    38.   color: #000000;
    39.   font-size: 11pt;
    40.   font-weight: 800;
    41.   border-bottom: 6rpx solid #333;
    42.   border-radius: 2px;
    43. }

    4. 使用

    在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

    1. "ignoreDevUnusedFiles": false,
    2. "ignoreUploadUnusedFiles": false,

    如图 :

    需要在哪个页面中进行使用，就需要在哪个页面中进行引用配置

    比如说 : 需要在会议页面中进行使用，就要在  会议页面.json (meeting/list/list.json)

     中增加以下设置

    1. {
    2.   "usingComponents": {
    3.     "tabs": "../../../components/tabs/tabs"
    4.   }
    5. }

    然后再 list.js 中进行初始化数据，在data属性中编写 : 

    1.  data: {
    2.     tabs:['会议中','已完成','已取消','全部会议']
    3. }

     在 list.wxml中使用 

    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. tabs>

    在模拟器中可以看到的效果 : 

    注意事项: 

    一些需要注意的细节：

    • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
    • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
    • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

    注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

    • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
    • 使用 usingComponents 时会多一些方法，如 selectComponent 。
    • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

    如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

    二、会议

    学会了自定义组件的使用，在后将会议的页面及效果编写搭建完成

    1. 数据

    在会议的 list.js 中进行初始化数据进行页面显示效果 :

    1. // pages/meeting/list/list.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     tabs:['会议中','已完成','已取消','全部会议'],
    9.     lists: [
    10.       {
    11.         'id': '1',
    12.         'image': '/static/persons/16.jpg',
    13.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    14.         'num':'304',
    15.         'state':'进行中',
    16.         'time': '10月09日 17:59',
    17.         'address': '深圳市·南山区'
    18.       },
    19.       {
    20.         'id': '1',
    21.         'image': '/static/persons/15.gif',
    22.         'title': 'AI WORLD 2016世界人工智能大会',
    23.         'num':'380',
    24.         'state':'进行中',
    25.         'time': '10月09日 17:39',
    26.         'address': '北京市·朝阳区'
    27.       },
    28.       {
    29.         'id': '1',
    30.         'image': '/static/persons/14.jpg',
    31.         'title': 'H100太空商业大会',
    32.         'num':'500',
    33.         'state':'进行中',
    34.         'time': '10月09日 17:31',
    35.         'address': '大连市'
    36.       },
    37.       {
    38.         'id': '1',
    39.         'image': '/static/persons/13.jpg',
    40.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    41.         'num':'150',
    42.         'state':'进行中',
    43.         'time': '10月09日 17:21',
    44.         'address': '北京市·朝阳区'
    45.       },
    46.       {
    47.         'id': '1',
    48.         'image': '/static/persons/8.jpg',
    49.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    50.         'num':'217',
    51.         'state':'进行中',
    52.         'time': '10月09日 16:59',
    53.         'address': '北京市·朝阳区'
    54.       }
    55.     ],
    56.     lists1: [
    57.       {
    58.         'id': '1',
    59.         'image': '/static/persons/7.jpg',
    60.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    61.         'num':'304',
    62.         'state':'已结束',
    63.         'time': '10月09日 17:59',
    64.         'address': '深圳市·南山区'
    65.       },
    66.       {
    67.         'id': '1',
    68.         'image': '/static/persons/15.gif',
    69.         'title': 'AI WORLD 2016世界人工智能大会',
    70.         'num':'380',
    71.         'state':'已结束',
    72.         'time': '10月09日 17:39',
    73.         'address': '北京市·朝阳区'
    74.       },
    75.       {
    76.         'id': '1',
    77.         'image': '/static/persons/14.jpg',
    78.         'title': 'H100太空商业大会',
    79.         'num':'500',
    80.         'state':'已结束',
    81.         'time': '10月09日 17:31',
    82.         'address': '大连市'
    83.       }
    84.     ],
    85.     lists2: [
    86.       {
    87.         'id': '1',
    88.         'image': '/static/persons/16.jpg',
    89.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    90.         'num':'304',
    91.         'state':'进行中',
    92.         'time': '10月09日 17:59',
    93.         'address': '深圳市·南山区'
    94.       },
    95.       {
    96.         'id': '1',
    97.         'image': '/static/persons/15.gif',
    98.         'title': 'AI WORLD 2016世界人工智能大会',
    99.         'num':'380',
    100.         'state':'已结束',
    101.         'time': '10月09日 17:39',
    102.         'address': '北京市·朝阳区'
    103.       }
    104.     ],
    105.     lists3: [
    106.       {
    107.         'id': '1',
    108.         'image': '/static/persons/8.jpg',
    109.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    110.         'num':'304',
    111.         'state':'进行中',
    112.         'time': '10月09日 17:59',
    113.         'address': '深圳市·南山区'
    114.       },
    115.       {
    116.         'id': '1',
    117.         'image': '/static/persons/7.jpg',
    118.         'title': 'AI WORLD 2016世界人工智能大会',
    119.         'num':'380',
    120.         'state':'已结束',
    121.         'time': '10月09日 17:39',
    122.         'address': '北京市·朝阳区'
    123.       },
    124.       {
    125.         'id': '1',
    126.         'image': '/static/persons/13.jpg',
    127.         'title': 'H100太空商业大会',
    128.         'num':'500',
    129.         'state':'进行中',
    130.         'time': '10月09日 17:31',
    131.         'address': '大连市'
    132.       },
    133.       {
    134.         'id': '1',
    135.         'image': '/static/persons/14.jpg',
    136.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    137.         'num':'150',
    138.         'state':'已结束',
    139.         'time': '10月09日 17:21',
    140.         'address': '北京市·朝阳区'
    141.       },
    142.       {
    143.         'id': '1',
    144.         'image': '/static/persons/15.gif',
    145.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    146.         'num':'217',
    147.         'state':'进行中',
    148.         'time': '10月09日 16:59',
    149.         'address': '北京市·朝阳区'
    150.       }
    151.     ]
    152.   },
    153.   tabsItemChange(e){
    154.     let tolists;
    155.     if(e.detail.index==1){
    156.         tolists = this.data.lists1;
    157.     }else if(e.detail.index==2){
    158.         tolists = this.data.lists2;
    159.     }else{
    160.         tolists = this.data.lists3;
    161.     }
    162.     this.setData({
    163.         lists: tolists
    164.     })
    165. },
    166.   /**
    167.    * 生命周期函数--监听页面加载
    168.    */
    169.   onLoad(options) {
    170.  
    171.   },
    172.  
    173.   /**
    174.    * 生命周期函数--监听页面初次渲染完成
    175.    */
    176.   onReady() {
    177.  
    178.   },
    179.  
    180.   /**
    181.    * 生命周期函数--监听页面显示
    182.    */
    183.   onShow() {
    184.  
    185.   },
    186.  
    187.   /**
    188.    * 生命周期函数--监听页面隐藏
    189.    */
    190.   onHide() {
    191.  
    192.   },
    193.  
    194.   /**
    195.    * 生命周期函数--监听页面卸载
    196.    */
    197.   onUnload() {
    198.  
    199.   },
    200.  
    201.   /**
    202.    * 页面相关事件处理函数--监听用户下拉动作
    203.    */
    204.   onPullDownRefresh() {
    205.  
    206.   },
    207.  
    208.   /**
    209.    * 页面上拉触底事件的处理函数
    210.    */
    211.   onReachBottom() {
    212.  
    213.   },
    214.  
    215.   /**
    216.    * 用户点击右上角分享
    217.    */
    218.   onShareAppMessage() {
    219.  
    220.   }
    221. })

    2. 显示 

    在会议的 list.wxml  中进行编写 :

    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. tabs>
    4. <view style="height: 100rpx;">view>
    5. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    6.     <view class="list" data-id="{{item.id}}">
    7.         <view class="list-img al-center">
    8.             <image class="video-img" mode="scaleToFill" src="{{item.image}}">image>
    9.         view>
    10.         <view class="list-detail">
    11.             <view class="list-title"><text>{{item.title}}text>view>
    12.             <view class="list-tag">
    13.                 <view class="state al-center">{{item.state}}view>
    14.                 <view class="join al-center"><text class="list-num">{{item.num}}text>人报名view>
    15.             view>
    16.             <view class="list-info"><text>{{item.address}}text>|<text>{{item.time}}text>view>
    17.         view>
    18.     view>
    19. block> 
    20. <view class="section bottom-line">
    21. 		<text>到底啦text>
    22. view>

    3. 样式

    在会议的 list.wxss  中进行编写样式，美化页面 :

    1. /* pages/meeting/list/list.wxss */
    2. .list {
    3.   display: flex;
    4.   flex-direction: row;
    5.   width: 100%;
    6.   padding: 0 20rpx 0 0;
    7.   border-top: 1px solid #eeeeee;
    8.   background-color: #fff;
    9.   margin-bottom: 5rpx;
    10.   /* border-radius: 20rpx;
    11.   box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
    12. }
    13.  
    14. .list-img {
    15.   display: flex;
    16.   margin: 10rpx 10rpx;
    17.   width: 150rpx;
    18.   height: 220rpx;
    19.   justify-content: center;
    20.   align-items: center;
    21. }
    22.  
    23. .list-img .video-img {
    24.   width: 120rpx;
    25.   height: 120rpx;
    26.   
    27. }
    28.  
    29. .list-detail {
    30.   margin: 10rpx 10rpx;
    31.   display: flex;
    32.   flex-direction: column;
    33.   width: 600rpx;
    34.   height: 220rpx;
    35. }
    36.  
    37. .list-title text {
    38.   font-size: 11pt;
    39.   color: #333;
    40.   font-weight: bold;
    41. }
    42.  
    43. .list-detail .list-tag {
    44.   display: flex;
    45.   height: 70rpx;
    46. }
    47.  
    48. .list-tag .state {
    49.   font-size: 9pt;
    50.   color: #81aaf7;
    51.   width: 120rpx;
    52.   border: 1px solid #93b9ff;
    53.   border-radius: 2px;
    54.   margin: 10rpx 0rpx;
    55.   display: flex;
    56.   justify-content: center;
    57.   align-items: center;
    58. }
    59.  
    60. .list-tag .join {
    61.   font-size: 11pt;
    62.   color: #bbb;
    63.   margin-left: 20rpx;
    64.   display: flex;
    65.   justify-content: center;
    66.   align-items: center;
    67. }
    68.  
    69. .list-tag .list-num {
    70.   font-size: 11pt;
    71.   color: #ff6666;
    72. }
    73.  
    74. .list-info {
    75.   font-size: 9pt;
    76.   color: #bbb;
    77.   margin-top: 20rpx;
    78. }
    79. .bottom-line{
    80.   display: flex;
    81.   height: 60rpx;
    82.   justify-content: center;
    83.   align-items: center;
    84.   background-color: #f3f3f3;
    85. }
    86. .bottom-line text{
    87.   font-size: 9pt;
    88.   color: #666;
    89. }

    效果: 

    注 ： 其中的图片名称及路径，需要根据自己的图片名称及路径进行修改 

    三、个人中心

    1. 页面

    在个人中心页面中编写 .wxml 文件(如 : ucenter/index/index.wxml) 进行页面显示

    3. <view class="user">
    4.     <image class="user-img"  src="/static/persons/2.jpg">image>
    5.     <view class="user-name">ಥ诗雅ಥview>
    6.     <text class="user-up">修改text>
    7. view>
    8. <view class="cells">
    9.     <view class="cell-items">
    10.         <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    11.         <text class="cell-items-title">我主持的会议text>
    12.         <text class="cell-items-num">1text>
    13.         <text class="cell-items-detail">👉text>
    14.     view>
    15.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);">view>
    16.     <view class="cell-items">
    17.         <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    18.         <text class="cell-items-title">我参与的会议text>
    19.         <text class="cell-items-num">10text>
    20.         <text class="cell-items-detail">👉text>
    21.     view>
    22. view>
    23. <view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);">view>
    24. <view class="cells">
    25.     <view class="cell-items">
    26.         <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    27.         <text class="cell-items-title">我发布的投票text>
    28.         <text class="cell-items-num">1text>
    29.         <text class="cell-items-detail">👉text>
    30.     view>
    31.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);">view>
    32.     <view class="cell-items">
    33.         <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    34.         <text class="cell-items-title">我参与的投票text>
    35.         <text class="cell-items-num">10text>
    36.         <text class="cell-items-detail">👉text>
    37.     view>
    38. view>
    39. <view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);">view>
    40. <view class="cells">
    41.     <view class="cell-items">
    42.         <image src="/static/tabBar/template.png" class="cell-items-icon">image>
    43.         <text class="cell-items-title">信息text>
    44.         <text class="cell-items-ion">👉text>
    45.     view>
    46.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);">view>
    47.     <view class="cell-items">
    48.         <image src="/static/tabBar/component.png" class="cell-items-icon">image>
    49.         <text class="cell-items-title">设置text>
    50.         <text class="cell-items-ion">👉text>
    51.     view>
    52. view>

    2. 样式

    在个人中心的 .wxss 样式文件 中进行编写样式，来美化布局的页面效果

    (如 : ucenter/index/index.wxss)

    1. /* pages/ucenter/index/index.wxss */
    2. Page{
    3.   background-color: rgba(135, 206, 250, 0.075);
    4. }
    5. .user{
    6.   display: flex;
    7.   width: 100%;
    8.   align-items:center;
    9.   background-color: white;
    10.   margin-bottom: 28rpx;
    11. }
    12. .user-img{
    13. height: 170rpx;
    14. width: 170rpx;
    15. margin: 30rpx;
    16. border: 1px solid #cdd7ee;
    17. border-radius: 6px;
    18. }
    19. .user-name{
    20. width: 380rpx;
    21. margin-left: 20rpx;
    22. font-weight: 550;
    23. }
    24. .user-up{
    25. color: rgb(136, 133, 133);
    26. }
    27. .cells{
    28.   background-color: white;
    29. }
    30. .cell-items{
    31.   display: flex;
    32.   align-items:center; 
    33.   height: 110rpx;
    34. }
    35. .cell-items-title{
    36.   width: 290rpx;
    37. }
    38. .cell-items-icon{
    39.   width: 50rpx;
    40.   height: 50rpx;
    41.   margin: 20rpx;
    42. }
    43. .cell-items-num{
    44.   padding-left: 30rpx;
    45.   margin-left: 200rpx;
    46.   width: 70rpx;
    47. }
    48. .cell-items-ion{
    49.   margin-left: 295rpx;
    50. }

    在模拟器中可以看到的效果 : 

    四、投票

    1. 引用

    在 投票页面的 .json 文件( 如: vote/list/list.json )中进行编写 ：

    1. {
    2.   "usingComponents": {
    3.     "tabs": "../../../components/tabs/tabs"
    4.   }
    5. }

    2. 数据

    在 投票页面的 .js 文件( 如: vote/list/list.js )中进行编写初始化数据及方法功能 ：

    1. // pages/vote/list/list.js
    2. Page({
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.     tabs:['全部','已发起','已参与'],
    8.     lists: [
    9.       {
    10.         'id': '1',
    11.         'image': '/static/persons/8.jpg',
    12.         'name' : '陈总监',
    13.         'title': '深圳·北京PM大会',
    14.         'vote' : '是否认同与京东进行产品合作',
    15.         'num'  : '304',
    16.         'state':'未投票',
    17.         'time' : '10月09日 17:59',
    18.         'address': '深圳市·南山区'
    19.       },
    20.       {
    21.         'id': '2',
    22.         'image': '/static/persons/16.jpg',
    23.         'name' : '小卡拉米',
    24.         'title': 'AIWORLD人工智能大会',
    25.         'vote' : '是否投资AI发展',
    26.         'num'  : '480',
    27.         'state':'已投票',
    28.         'time' : '10月09日 17:39',
    29.         'address': '北京市·朝阳区'
    30.       },
    31.       {
    32.         'id': '3',
    33.         'image': '/static/persons/13.jpg',
    34.         'name' : '独孤求偶',
    35.         'title': 'H100太空商业大会',
    36.         'vote' : '是否太空商业进行合作',
    37.         'num'  : '500',
    38.         'state': '未参与',
    39.         'time' : '10月09日 17:31',
    40.         'address': '大连市'
    41.       },
    42.       {
    43.         'id': '4',
    44.         'image': '/static/persons/15.gif',
    45.         'name' : ' IKUN ',
    46.         'title': '2023消费升级创新大会',
    47.         'vote' : '是否对本次创新持续升级',
    48.         'num':'217',
    49.         'state':'已投票',
    50.         'time': '11月20日 16:59',
    51.         'address': '北京市·朝阳区'
    52.       }
    53.     ],
    54.     lists1: [
    55.       {
    56.         'id': '1',
    57.         'image': '/static/persons/8.jpg',
    58.         'name' : '沸羊羊',
    59.         'title': '深圳·北京PM大会',
    60.         'vote' : '是否认同与京东进行产品合作',
    61.         'num'  : '304',
    62.         'state':'未投票',
    63.         'time' : '10月09日 17:59',
    64.         'address': '深圳市·南山区'
    65.       },
    66.       {
    67.         'id': '2',
    68.         'image': '/static/persons/16.jpg',
    69.         'name' : '小灰灰',
    70.         'title': 'AIWORLD人工智能大会',
    71.         'vote' : '是否投资AI发展',
    72.         'num'  : '480',
    73.         'state':'已投票',
    74.         'time' : '10月09日 17:39',
    75.         'address': '北京市·朝阳区'
    76.       },
    77.       {
    78.         'id': '3',
    79.         'image': '/static/persons/13.jpg',
    80.         'name' : '小美',
    81.         'title': 'H100太空商业大会',
    82.         'vote' : '是否太空商业进行合作',
    83.         'num'  : '500',
    84.         'state': '未参与',
    85.         'time' : '10月09日 17:31',
    86.         'address': '大连市'
    87.       },
    88.       {
    89.         'id': '4',
    90.         'image': '/static/persons/15.gif',
    91.         'name' : ' 坤坤 ',
    92.         'title': '2023消费升级创新大会',
    93.         'vote' : '是否对本次创新持续升级',
    94.         'num':'217',
    95.         'state':'已投票',
    96.         'time': '11月20日 16:59',
    97.         'address': '北京市·朝阳区'
    98.       }
    99.     ],
    100.     lists2: [
    101.       {
    102.         'id': '1',
    103.         'image': '/static/persons/8.jpg',
    104.         'name' : '丘比特',
    105.         'title': '深圳·北京PM大会',
    106.         'vote' : '是否认同与京东进行产品合作',
    107.         'num'  : '422',
    108.         'state':'未投票',
    109.         'time' : '10月09日 17:59',
    110.         'address': '深圳市·南山区'
    111.       },
    112.       {
    113.         'id': '2',
    114.         'image': '/static/persons/16.jpg',
    115.         'name' : '牛爱花',
    116.         'title': 'AIWORLD人工智能大会',
    117.         'vote' : '是否投资AI发展',
    118.         'num'  : '377',
    119.         'state':'已投票',
    120.         'time' : '10月09日 17:39',
    121.         'address': '北京市·朝阳区'
    122.       },
    123.       {
    124.         'id': '3',
    125.         'image': '/static/persons/13.jpg',
    126.         'name' : '不才',
    127.         'title': 'H100太空商业大会',
    128.         'vote' : '是否太空商业进行合作',
    129.         'num'  : '463',
    130.         'state': '未参与',
    131.         'time' : '10月09日 17:31',
    132.         'address': '大连市'
    133.       },
    134.       {
    135.         'id': '4',
    136.         'image': '/static/persons/15.gif',
    137.         'name' : ' K&K ',
    138.         'title': '2023消费升级创新大会',
    139.         'vote' : '是否对本次创新持续升级',
    140.         'num':'543',
    141.         'state':'已投票',
    142.         'time': '11月20日 16:59',
    143.         'address': '北京市·朝阳区'
    144.       }
    145.     ]
    146.   },
    147.   tabsItemChange(e){
    148.     console.log(e.detail);
    149.     let tolists;
    150.     if(e.detail.index==1){
    151.         tolists = this.data.lists1;
    152.     }else if(e.detail.index==2){
    153.         tolists = this.data.lists2;
    154.     }else{
    155.         tolists = this.data.lists;
    156.     }
    157.     this.setData({
    158.         lists: tolists
    159.     })
    160. },
    161.   /**
    162.    * 生命周期函数--监听页面加载
    163.    */
    164.   onLoad(options) {
    165.  
    166.   },
    167.  
    168.   /**
    169.    * 生命周期函数--监听页面初次渲染完成
    170.    */
    171.   onReady() {
    172.  
    173.   },
    174.  
    175.   /**
    176.    * 生命周期函数--监听页面显示
    177.    */
    178.   onShow() {
    179.  
    180.   },
    181.  
    182.   /**
    183.    * 生命周期函数--监听页面隐藏
    184.    */
    185.   onHide() {
    186.  
    187.   },
    188.  
    189.   /**
    190.    * 生命周期函数--监听页面卸载
    191.    */
    192.   onUnload() {
    193.  
    194.   },
    195.  
    196.   /**
    197.    * 页面相关事件处理函数--监听用户下拉动作
    198.    */
    199.   onPullDownRefresh() {
    200.  
    201.   },
    202.  
    203.   /**
    204.    * 页面上拉触底事件的处理函数
    205.    */
    206.   onReachBottom() {
    207.  
    208.   },
    209.  
    210.   /**
    211.    * 用户点击右上角分享
    212.    */
    213.   onShareAppMessage() {
    214.  
    215.   }
    216. })

    3. 页面

    在投票页面的 wxml 文件( 如: vote/list/list.wxml )中进行编写页面标签显示数据及效果 ：

    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. tabs>
    4. <view style="height: 100rpx;">view>
    5. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    6.     <view class="list" data-id="{{item.id}}">
    7.         <view class="list-img al-center">
    8.             <image class="video-img" mode="scaleToFill" src="{{item.image}}">image>
    9.         view>
    10.         <view class="list-detail">
    11.           <view class="list-title"><text><text style="margin-right: 13rpx;"> 发 起 人text> ： {{item.name}}text>view>
    12.             <view class="list-title"><text>会议名称 ： {{item.title}}text>view>
    13.             <view class="list-title"><text>投票标题 ： [ {{item.vote}} ]text>view>
    14.             <view class="list-tag">
    15.                 <view class="state al-center">{{item.state}}view>
    16.                 <view class="join al-center"><text class="list-num" >{{item.num}}text>人参与投票view>
    17.             view>
    18.             <view class="list-info"><text>{{item.address}}text> | <text>{{item.time}}text>view>
    19.         view>
    20.     view>
    21. block> 
    22. <view class="section bottom-line">
    23. 		<text>到底啦text>
    24. view>

    4. 样式

    在投票页面的 .wxss 文件( 如: vote/list/list.wxss)中进行编写页面样式进行美化效果 ：

    1. /* pages/vote/list/list.wxss */
    2. .list {
    3.   display: flex;
    4.   flex-direction: row;
    5.   width: 100%;
    6.   padding: 0 20rpx 0 0;
    7.   border-top: 1px solid #eeeeee;
    8.   background-color: #fff;
    9.   margin-bottom: 5rpx;
    10.   height: 270rpx;
    11.   /* border-radius: 20rpx;
    12.   box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
    13. }
    14.  
    15. .list-img {
    16.   display: flex;
    17.   margin: 10rpx 10rpx;
    18.   width: 160rpx;
    19.   height: 250rpx;
    20.   justify-content: center;
    21.   align-items: center;
    22.   flex-direction:column;
    23. }
    24.  
    25. .list-img .video-img {
    26.   width: 140rpx;
    27.   height: 160rpx;
    28.   border-radius: 6px;
    29. }
    30.  
    31. .list-detail {
    32.   margin: 10rpx 10rpx;
    33.   display: flex;
    34.   flex-direction: column;
    35.   width: 600rpx;
    36.   height: 300rpx;
    37. }
    38.  
    39. .list-title text {
    40.   font-size: 9pt;
    41.   color: #333;
    42.   font-weight: bold;
    43. }
    44.  
    45. .list-detail  {
    46.   display: flex;
    47.   height: 100rpx;
    48. }
    49. .list-tag{
    50.   display: flex;
    51. }
    52. .state {
    53.   font-size: 9pt;
    54.   color: #81aaf7;
    55.   width: 120rpx;
    56.   height: 40rpx;
    57.   border: 1px solid #93b9ff;
    58.   border-radius: 2px;
    59.   margin: 10rpx 0rpx;
    60.   display: flex;
    61.   justify-content: center;
    62.   align-items: center;
    63. }
    64.  .join {
    65.   font-size: 11pt;
    66.   color: #bbb;
    67.   margin-left: 20rpx;
    68.   display: flex;
    69.   justify-content: center;
    70.   align-items: center;
    71. }
    72.  .list-num {
    73.   margin-right: 10rpx;
    74.   font-size: 11pt;
    75.   color: #ff6666;
    76. }
    77.  
    78. .list-info {
    79.   font-size: 9pt;
    80.   color: #bbb;
    81. }
    82. .bottom-line{
    83.   display: flex;
    84.   height: 60rpx;
    85.   justify-content: center;
    86.   align-items: center;
    87.   background-color: #f3f3f3;
    88. }
    89. .bottom-line text{
    90.   font-size: 9pt;
    91.   color: #666;
    92. }

    在模拟器中可以看到的效果 : 

    每篇收获

    通过学习微信小程序中的自定义组件，您可以获得以下收获：

    1. 代码复用：自定义组件可以将一些通用的功能和样式封装起来，方便在不同的页面中复用。例如，在OA项目中，可以将会议、投票和个人中心的布局封装成自定义组件，以便在不同的页面中使用。

    2. 提高开发效率：使用自定义组件可以减少重复的开发工作，提高开发效率。一次编写好的自定义组件可以在多个页面中使用，避免了重复编写相似的代码。

    3. 统一样式和交互：通过自定义组件，可以将相同功能的组件样式和交互行为进行统一，提高用户体验。在OA项目中，可以通过自定义组件统一会议、投票和个人中心的样式和交互，使用户在不同页面中有一致的使用体验。

    4. 方便维护和更新：自定义组件可以独立于页面进行维护和更新，使代码结构更清晰。如果需要修改某个功能或者样式，只需要修改自定义组件的代码，所有使用该组件的页面都会自动更新。

    总之，学习微信小程序中的自定义组件并应用于OA项目中的会议、投票和个人中心的布局，可以提高开发效率，统一样式和交互，方便维护和更新，为用户提供更好的使用体验。

  • 相关阅读:
    内网Windows Git Server部署
    月薪11K，国企小哥抛弃“铁饭碗”转行测试，亲身经历告诉你选高薪or稳定～
    SpringBoot+Vue实现前后端分离的员工日志管理信息系统
    Qt扫盲-QPen 理论使用总结
    Python爬虫:通过js逆向获取某视频平台上的视频的m3u8链接
    MyCat2的介绍与安装以及基本使用
    React报错之Cannot assign to ‘current‘ because it is a read-only property
    基于DE10-Standard Cyclone V SoC FPGA学习---开发板简介
    西安健身房共享系统开发如何快速回笼资金？
    java.lang.Float类下byteValue()方法具有什么功能呢？
  • 原文地址：https://blog.csdn.net/SAME_LOVE/article/details/133926100