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

    目录

    一.自定义组件及会议效果编写

    效果显示 

     二.个人中心布局

    编写结果

    ​编辑 

    一.自定义组件及会议效果编写

    在页面中创建一个以components命名的项目来存放组件

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

     

    刚刚创建好会报一个编码错误我们需要在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

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

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

    如下图所示 

     

     

    在 tabs.json 中编写:  

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

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

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

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

    1. // components/tabs/tabs.js
    2. var App = getApp();
    3. Component({
    4.   /**
    5.    * 组件的属性列表
    6.    */
    7.   properties: {
    8.     tabList:Object
    9.   },
    10.  
    11.   /**
    12.    * 组件的初始数据
    13.    */
    14.   data: {
    15.     tabIndex:0
    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. })

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

    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. }

    在会议页面.json (meeting/list/list.json)中增加以下设置

     

    再 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. })

     在 list.wxml中使用  

     

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

    在会议的 list.wxss  中进行编写样式

    1. /* pages/meeting/list/list.wxss */
    2. .mobi-title{
    3.   background-color: green;
    4.   padding: 10px;
    5. }
    6. .mobi-icon{
    7.   border: 1rpx solid red;
    8.   margin-right: 5px;
    9. }
    10. .mobi-title text{
    11.   font-weight: 700;
    12.   color: aqua;
    13. }
    14. .list{
    15.  display: flex;
    16.  align-items: center;
    17.  /* background-color: yellowgreen; */
    18.  border-bottom: 3px solid yellowgreen;
    19. }
    20. .list-img{
    21. padding: 0 10px;
    22. }
    23. .video-img{
    24.   height: 80px;
    25.   width: 80px;
    26. }
    27. .list-detail{
    28.  
    29. }
    30. .list-title{
    31. font-weight: 700;
    32. margin: 3px 0;
    33. }
    34. .list-tag{
    35. display: flex;
    36. align-items: center;
    37. }
    38. .state{
    39. border: 2px solid red;
    40. padding: 3px 6px;
    41. color: red;
    42. margin:0   5px 10px 0;
    43. }
    44. .join{
    45. color: yellowgreen;
    46. }
    47. .list-num{
    48.   color: aqua;
    49.   font-weight: 700;
    50. }
    51. .list-info{
    52.   color: yellowgreen;
    53.   font-size: 12px;
    54. }

    到这里自定义组件将会议的页面搭建以及效果显示完成

    效果显示 

     

     二.个人中心布局

    在 ucenter/index/index.wxml进行页面显示编写

    3. <view class="user">
    4.     <image class="user-img"  src="/static/persons/2.jpg">image>
    5.     <view class="user-name">Fithe.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>

    在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. }
    编写结果
     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    3.应用程序进程启动过程
    记录Centos7.9 安装mongodb 6.0 过程遇到的坑和解决办法
    C++数据结构X篇_18_二叉树的创建（根据遍历结果创建二叉树；#号法创建树）
    【学习笔记】NOIP暴零赛
    leetcode:169多数元素------摩尔投票法
    C++入门01—从hello word！开始
    spark中的cache和checkpoint
    [需求管理-3]：什么是需求分析？常用的需求分析的流程与方法
    中缀表达式转后缀表达式，及含多位负数的中缀表达式计算（中缀转后缀解法）
    Avalon总线协议汇总
  • 原文地址：https://blog.csdn.net/2201_75455485/article/details/133932251