• 会议OA项目-其它页面-＞自定义组件应用,其它界面的布局

    1.自定义组件应用

    文档参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

    1. //oamin\project.config.json
    2. {
    3.   "description": "项目配置文件",
    4.   "packOptions": {
    5.     "ignore": [],
    6.     "include": []
    7.   },
    8.   "setting": {
    9.     "bundle": false,
    10.     "userConfirmedBundleSwitch": false,
    11.     "ignoreDevUnusedFiles": false,
    12.     "ignoreUploadUnusedFiles": false,
    13.     "urlCheck": true,
    14.     "scopeDataCheck": false,
    15.     "coverView": true,
    16.     "es6": true,
    17.     "postcss": true,
    18.     "compileHotReLoad": false,
    19.     "lazyloadPlaceholderEnable": false,
    20.     "preloadBackgroundData": false,
    21.     "minified": true,
    22.     "autoAudits": false,
    23.     "newFeature": false,
    24.     "uglifyFileName": false,
    25.     "uploadWithSourceMap": true,
    26.     "useIsolateContext": true,
    27.     "nodeModules": false,
    28.     "enhance": true,
    29.     "useMultiFrameRuntime": true,
    30.     "useApiHook": true,
    31.     "useApiHostProcess": true,
    32.     "showShadowRootInWxmlPanel": true,
    33.     "packNpmManually": false,
    34.     "enableEngineNative": false,
    35.     "packNpmRelationList": [],
    36.     "minifyWXSS": true,
    37.     "showES6CompileOption": false,
    38.     "minifyWXML": true,
    39.     "babelSetting": {
    40.       "ignore": [],
    41.       "disablePlugins": [],
    42.       "outputPath": ""
    43.     }
    44.   },
    45.   "compileType": "miniprogram",
    46.   "libVersion": "2.19.4",
    47.   "appid": "wx02e1b4896f9ba974",
    48.   "projectname": "miniprogram-92",
    49.   "condition": {},
    50.   "editorSetting": {
    51.     "tabIndent": "insertSpaces",
    52.     "tabSize": 2
    53.   }
    54. }
    3. "tabs">
    4.     "tabs_title">
    5.         for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
    6.             "margin-bottom:5rpx">{{item}}
    7.             "width:30px" class="{{index==tabIndex?'item_active1':''}}">
    8.         
    9.     
    10.     "tabs_content">
    11.         
    12.     
    14.  
    15.  
    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. }
    45.  
    46. /* components/tabs/tabs.wxss */
    47. .tabs {
    48.   position: fixed;
    49.   top: 0;
    50.   width: 100%;
    51.   background-color: #fff;
    52.   z-index: 99;
    53.   border-bottom: 1px solid #efefef;
    54.   padding-bottom: 20rpx;
    55. }
    56.  
    57. .tabs_title {
    58.   /* width: 400rpx; */
    59.   width: 90%;
    60.   display: flex;
    61.   font-size: 9pt;
    62.   padding: 0 20rpx;
    63. }
    64.  
    65. .title_item {
    66.   color: #999;
    67.   padding: 15rpx 0;
    68.   display: flex;
    69.   flex: 1;
    70.   flex-flow: column nowrap;
    71.   justify-content: center;
    72.   align-items: center;
    73. }
    74.  
    75. .item_active {
    76.   /* color:#ED8137; */
    77.   color: #000000;
    78.   font-size: 11pt;
    79.   font-weight: 800;
    80. }
    81.  
    82. .item_active1 {
    83.   /* color:#ED8137; */
    84.   color: #000000;
    85.   font-size: 11pt;
    86.   font-weight: 800;
    87.   border-bottom: 6rpx solid #333;
    88.   border-radius: 2px;
    89. }
    90.  
    1. //oamin\pages\meeting\list\list.json
    2. {
    3.   "usingComponents": {
    4.     "tabs": "/components/tabs/tabs"
    5.   }
    6. }
    1. // components/tabs/tabs.js
    2. Component({
    3.  
    4.   /**
    5.    * 组件的属性列表
    6.    */
    7.   properties: {
    8.    tabList:Object
    9.   },
    10.   /**
    11.    * 组件的初始数据
    12.    */
    13.   data: {
    14.  
    15.   },
    16.  
    17.   /**
    18.    * 组件的方法列表
    19.    */
    20.   methods: {
    21.     handleItemTap(e){
    22.       // 获取索引
    23.       const {index} = e.currentTarget.dataset;
    24.       // 触发 父组件的事件
    25.       this.triggerEvent("tabsItemChange",{index})
    26.       this.setData({
    27.           tabIndex:index
    28.       })
    29.     }
    30.   }
    31. })

    2.其它界面的布局

    3. "user">
    4.   "user-img" src="/static/persons/1.jpg">
    5.   "user-name">牛逼
    6.   "user-oper">修改
    8. "info">
    9.   "item1">
    10.     "item-icon" src="/static/tabBar/sdk.png">
    11.     "item-title">我主持的会议
    12.     "item-num">1
    13.     "item-open">＞
    14.   
    15.   "item2">
    16.     "item-icon" src="/static/tabBar/sdk.png">
    17.     "item-title">我参与的会议
    18.     "item-num">10
    19.     "item-open">＞
    20.   
    22. "info">
    23.   "item1">
    24.     "item-icon" src="/static/tabBar/sdk.png">
    25.     "item-title">我发布的会议
    26.     "item-num">1
    27.     "item-open">＞
    28.   
    29.   "item2">
    30.     "item-icon" src="/static/tabBar/sdk.png">
    31.     "item-title">我参与的投票
    32.     "item-num">10
    33.     "item-open">＞
    34.   
    36. "info">
    37.   "item1">
    38.     "item-icon" src="/static/tabBar/sdk.png">
    39.     "item-title">消息
    40.     "item-num">
    41.     "item-open">＞
    42.   
    43.   "item2">
    44.     "item-icon" src="/static/tabBar/sdk.png">
    45.     "item-title">设置
    46.     "item-num">
    47.     "item-open">＞
    48.   
    1. /* pages/ucenter/index/index.wxss */
    2. .user {
    3.   display: flex;
    4.   align-items: center;
    5.   border-bottom: 6px solid lightgray;
    6. }
    7.  
    8. .user-img {
    9.   width: 80px;
    10.   height: 80px;
    11.   margin: 10px;
    12. }
    13.  
    14. .user-name {
    15.   font-weight: 700;
    16.   margin: 0 250rpx 0 50rpx;
    17. }
    18.  
    19. .user-open {
    20.   color: lightgray;
    21. }
    22.  
    23. /* .info {} */
    24.  
    25. .item1,.item2 {
    26.   padding: 5px;
    27.   display: flex;
    28.   align-items: center;
    29. }
    30. .item1{
    31.   border-bottom: 1px solid lightgray;
    32. }
    33. .item2 {
    34.   border-bottom: 10px solid lightgray;
    35. }
    36. .item-icon {
    37.   width: 40px;
    38.   height: 40px;
    39. }
    40.  
    41. .item-title {
    42.   width: 500rpx;
    43. }
    44.  
    45. .item-num {
    46.   width: 60rpx;
    47. }
    48.  
    49. /* .item-open {} */

  • 相关阅读:
    向量数据库Milvus字符串查询
    SpringMVC学习笔记（三）
    从李佳琦到背后的商业逻辑再到游戏行业
    FastDFS-02-JavaAPI
    PlatformIO开发环境
    计算机毕业设计-长途汽车售票系统SSM+JSP【代码讲解+安装调试+文档指导】
    Android 中的权限
    【MATLAB源码-第157期】基于matlab的海马优化算法（SHO)机器人栅格路径规划，输出做短路径图和适应度曲线。
    vue3 prop验证类型
    mysql更新 在字符串中的指定字符后面拼接字符串
  • 原文地址：https://blog.csdn.net/weixin_73471776/article/details/133917708