• 会议OA小程序【会议管理，个人中心页面布局】

    目录

    一. 自定义组件介绍

    1.1 概念

    1.2 创建自定义组件

    二. 会议管理页面布局

    使用自定义组件

    页面布局及样式

    三. 个人中心页面布局

    一. 自定义组件介绍

    1.1 概念

    从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

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

    1.2 创建自定义组件

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

    1. {
    2.   "component": true
    3. }

     同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

    代码示例：

    1. <!--components/tabs/tabs.wxml-->
    2. <view class="tabs">
    3.     <view class="tabs_title">
    4.         <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
    5.             <view style="margin-bottom:5rpx">{{item}}</view>
    6.             <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
    7.         </view>
    8.     </view>
    9.     <view class="tabs_content">
    10.         <slot></slot>
    11.     </view>
    12. </view>
    1. /* components/tabs/tabs.wxss */
    2. .tabs {
    3.   position: fixed;
    4.   top: 0;
    5.   width: 100%;
    6.   background-color: #fff;
    7.   z-index: 99;
    8.   border-bottom: 1px solid #efefef;
    9.   padding-bottom: 20rpx;
    10. }
    11.  
    12. .tabs_title {
    13.   /* width: 400rpx; */
    14.   width: 90%;
    15.   display: flex;
    16.   font-size: 9pt;
    17.   padding: 0 20rpx;
    18. }
    19.  
    20. .title_item {
    21.   color: #999;
    22.   padding: 15rpx 0;
    23.   display: flex;
    24.   flex: 1;
    25.   flex-flow: column nowrap;
    26.   justify-content: center;
    27.   align-items: center;
    28. }
    29.  
    30. .item_active {
    31.   /* color:#ED8137; */
    32.   color: #000000;
    33.   font-size: 11pt;
    34.   font-weight: 800;
    35. }
    36.  
    37. .item_active1 {
    38.   /* color:#ED8137; */
    39.   color: #000000;
    40.   font-size: 11pt;
    41.   font-weight: 800;
    42.   border-bottom: 6rpx solid #333;
    43.   border-radius: 2px;
    44. }

    注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。 

    在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

    组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

    代码示例：

    1. // components/tabs/tabs.js
    2. Component({
    3.  
    4.   /**
    5.    * 组件的属性列表
    6.    */
    7.   properties: {
    8.     tabList:Object
    9.   },
    10.  
    11.   /**
    12.    * 组件的初始数据
    13.    */
    14.   data: {
    15.  
    16.   },
    17.  
    18.   /**
    19.    * 组件的方法列表
    20.    */
    21.   methods: {
    22.     handleItemTap(e){
    23.       // 获取索引
    24.       const {index} = e.currentTarget.dataset;
    25.       // 触发 父组件的事件
    26.       this.triggerEvent("tabsItemChange",{index})
    27.       this.setData({
    28.           tabIndex:index
    29.       })
    30.     }
    31.   }
    32. })

    更多详细内容参见微信小程序自定义组件 

    二. 会议管理页面布局

    在project.config.json中添加以下代码防止项目出现报错 

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

    使用自定义组件

    list.json

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

    页面布局及样式

    list.wxml

    1. <!--pages/meeting/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>{{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>

    list.wxss

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

    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/1.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/2.jpg',
    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/3.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/4.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/5.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/1.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/2.jpg',
    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/3.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/1.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/2.jpg',
    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/1.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/2.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/3.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/4.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/5.jpg',
    145.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    146.         'num':'217',
    147.         'state':'进行中',
    148.         'time': '10月09日 16:59',
    149.         'address': '北京市·朝阳区'
    150.       }
    151.     ]
    152.   },
    153.   /**
    154.    * 生命周期函数--监听页面加载
    155.    */
    156.   onLoad(options) {
    157.  
    158.   },
    159.  
    160.  
    161.   /**
    162.    * 生命周期函数--监听页面显示
    163.    */
    164.   onShow() {
    165.  
    166.   },
    167.  
    168.   tabsItemChange(e){
    169.       let tolists;
    170.       if(e.detail.index==1){
    171.           tolists = this.data.lists1;
    172.       }else if(e.detail.index==2){
    173.           tolists = this.data.lists2;
    174.       }else{
    175.           tolists = this.data.lists3;
    176.       }
    177.       this.setData({
    178.           lists: tolists
    179.       })
    180.   }
    181. })

    效果展示

     

    三. 个人中心页面布局

    index.wxml

    1. <!--pages/ucenter/index/index.wxml-->
    2. <!-- <text>pages/ucenter/index/index.wxml</text> -->
    3. <view class="userInfo">
    4.     <image class="userInfo-head" src="/static/images/avatar.png"></image>
    5.     <text class="userInfo-login">用户登录</text>
    6.     <text class="userInfo-set">修改</text>
    7. </view>
    8. <view class="cells">
    9.     <view class="cell-items1">
    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">1</text>
    13.         <text class="cell-items-detail">＞</text>
    14.     </view>
    15.     <hr/>
    16.     <view class="cell-items2">
    17.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    18.         <text class="cell-items-title2">我参与的会议</text>
    19.         <text class="cell-items-num">1</text>
    20.         <text class="cell-items-detail">＞</text>
    21.     </view>
    22. </view>
    23. <view class="cells">
    24.     <view class="cell-items1">
    25.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    26.         <text class="cell-items-title">我发布的投票</text>
    27.         <text class="cell-items-num">1</text>
    28.         <text class="cell-items-detail">＞</text>
    29.     </view>
    30.     <hr/>
    31.     <view class="cell-items2">
    32.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    33.         <text class="cell-items-title2">我参与的投票</text>
    34.         <text class="cell-items-num">1</text>
    35.         <text class="cell-items-detail">＞</text>
    36.     </view>
    37. </view>
    38. <view class="cells">
    39.     <view class="cell-items1">
    40.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    41.         <text space="ensp" class="cell-items-title">消        息</text>
    42.         <text class="cell-items-num">1</text>
    43.         <text class="cell-items-detail">＞</text>
    44.     </view>
    45.     <hr/>
    46.     <view class="cell-items2">
    47.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    48.         <text space="ensp" class="cell-items-title2">设        置</text>
    49.         <text class="cell-items-num">1</text>
    50.         <text class="cell-items-detail">＞</text>
    51.     </view>
    52. </view>

    index.wxss

    1. /* pages/ucenter/index/index.wxss */
    2. Page{
    3.   background-color: rgba(135, 206, 250, 0.075);
    4. }
    5. .userInfo{
    6.   display: flex;
    7.   height: 300rpx;
    8.   width: 100%;
    9.   background-color: #fff;
    10.   border-bottom: 15px solid lightgray;
    11. }
    12. .userInfo-head{
    13.   height: 250rpx;
    14.   width: 250rpx;
    15.   margin: 20rpx;
    16. }
    17. .userInfo-login{
    18.   width: 400rpx;
    19.   margin:150rpx 20rpx;
    20. }
    21. .userInfo-set{
    22.   /* height: 100rpx; */
    23.   width: 100rpx;
    24.   margin:150rpx 20rpx;
    25. }
    26.  
    27. .cells{
    28.   background-color: #fff;
    29.   height: 270rpx;
    30. }
    31. .cell-items1,.cell-items2{
    32.   height: 120rpx;
    33.   display: flex;
    34.   /* margin: 30rpx 0 0 0; */
    35.   /* border-bottom: 1px solid lightskyblue; */
    36. }
    37. .cell-items2{
    38.   /* height: 120rpx;
    39.   display: flex;
    40.   margin: 20rpx 0 0 0; */
    41.   border-bottom: 15px solid lightgray;
    42. }
    43. .cell-items-icon{
    44.   height: 80rpx;
    45.   width: 80rpx;
    46.   margin: 15rpx;
    47. }
    48. .cell-items-title{
    49.   display: flex;
    50.   font-weight: 700;
    51.   font-size: 15px;
    52.   /* margin: 20rpx 0 0 50rpx; */
    53.   margin-top: 10rpx;
    54.   padding: 15rpx;
    55. }
    56. .cell-items-title2{
    57.   display: flex;
    58.   font-weight: 700;
    59.   font-size: 15px;
    60.   margin-top: 10rpx;
    61.   /* align-items: center; */
    62.   padding: 15rpx;
    63.   /* border-top: 20rpx; */
    64. }
    65. .cell-items-num{
    66.   margin: 20rpx 0 0 300rpx;
    67. }
    68. .cell-items-detail{
    69.   margin: 20rpx 0 0 20rpx;
    70. }
    71. .cells > hr{
    72.   display: block;
    73.   height: 1px;
    74.   background-color: rgba(135, 206, 250, 0.075);
    75. }

    效果展示

     

  • 相关阅读:
    【2023，学点儿新Java-48】变量与运算符 (阶段性复习)：关键字和保留，回顾：标识符的命名规则，变量的基本使用
    活动回顾 | 基于英特尔技术的端到端音视频优化
    LLm微调使用的数据集
    ①【数据库操作】 MySQL数据库的查询、创建、删除、使用。
    从普通查询商品到高并发查询商品的优化思路
    React-性能优化的手段
    淘宝退货退款测试用例
    [附源码]计算机毕业设计JAVA教师业绩考核系统
    基于android实现的在线投票App毕业设计源码
    【ESP32_8266_WiFi (十三)】ESP8266自动配网 – WiFiManager库使用说明
  • 原文地址：https://blog.csdn.net/lijie1025/article/details/133902756