devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序之开发会议OA项目

作者：小小林熬夜学编程 | 2024-02-22 15:56:12

赞

踩

微信小程序之开发会议OA项目

目录

前言

本篇目标 

首页

会议

投票 

个人中心 

会议OA项目-首页

配置

tabbar

mock工具

page

swiper

会议信息

会议OA项目-会议 

自定义tabs组件

会议管理

会议OA项目-投票

会议OA项目-个人中心

前言

文章含源码资源，投票及个人中心详细自行查看源码即可

  1. 小程序没有DOM对象，一切基于组件化

  2. 储备知识

    1. 理解事件机制

    2. 理解组件化

    3. 理解数据绑定

    4. Flex布局

    5. 移动端适配方案

  3. 建议：学习vue后开发小程序更简单

本篇目标 

首页

会议

 

投票 

个人中心 

 

会议OA项目-首页

配置

  • config/api.js 
    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3. var WxApiRoot = 'http://localhost:8080/demo/wx/';
    4. // 测试环境部署api地址
    5. // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
    6. // 线上平台api地址
    7. //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9. module.exports = {
    10.   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.   SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
    12.   MettingInfos: WxApiRoot+'meeting/list', //会议信息
    13. };

tabbar

  • app.json 
    1. "list": [{
    2.       "pagePath": "pages/index/index",
    3.       "text": "首页",
    4.       "iconPath": "/static/tabBar/coding.png",
    5.       "selectedIconPath": "/static/tabBar/coding-active.png"
    6.     },
    7.       {
    8.         "pagePath": "pages/meeting/list/list",
    9.         "iconPath": "/static/tabBar/sdk.png",
    10.         "selectedIconPath": "/static/tabBar/sdk-active.png",
    11.         "text": "会议"
    12.       },
    13.       {
    14.         "pagePath": "pages/vote/list/list",
    15.         "iconPath": "/static/tabBar/template.png",
    16.         "selectedIconPath": "/static/tabBar/template-active.png",
    17.         "text": "投票"
    18.       },
    19.       {
    20.         "pagePath": "pages/ucenter/index/index",
    21.         "iconPath": "/static/tabBar/component.png",
    22.         "selectedIconPath": "/static/tabBar/component-active.png",
    23.         "text": "个人中心"
    24.       }]

mock工具

  • imageSrcs 
    1. {
    2.   "data": {
    3.     "images":[
    4.         {
    5.           "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.ja-L_FC01Xbzhqo4Rm3B8gHaEo?rs=1&pid=ImgDetMain",
    6.           "text": "1"
    7.         },
    8.         {
    9.           "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.A3UXYP_OyP3S5UfO6HXuAgHaEK?rs=1&pid=ImgDetMain",
    10.           "text": "2"
    11.         },
    12.         {
    13.           "img": "https://pic3.zhimg.com/v2-9873f715d01819718cdc59dc004052b5_1440w.jpg?source=172ae18b",
    14.           "text": "3"
    15.         },
    16.         {
    17.           "img": "https://ts1.cn.mm.bing.net/th/id/R-C.8bb9ed00b8b77b8de03ca88c2c5b9c70?rik=KsLZ%2fjYfY5ELCg&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f10539408%2f14.jpg&ehk=HMGT1e0hcjxVw1XAbC7yJpq3qSDWlnwsj%2fRN%2f0Etimk%3d&risl=&pid=ImgRaw&r=0",
    18.           "text": "4"
    19.         },
    20.         {
    21.           "img": "https://img1.pconline.com.cn/piclib/200906/09/batch/1/34797/1244512002916phjm5dpgjl.jpg",
    22.           "text": "5"
    23.         },
    24.         {
    25.           "img": "https://ts1.cn.mm.bing.net/th/id/R-C.d951726778523659c8f2d7fd6ad838fd?rik=kR8VYs9ELLWFKQ&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f85280274%2f2017032108.jpg&ehk=%2fJInO%2fEPMaYF1q%2fu6vzk2j6hPSkAEyCyc3%2fH1Ib1tM0%3d&risl=&pid=ImgRaw&r=0",
    26.           "text": "6"
    27.         }
    28.     ]
    29.   },
    30.   "statusCode": "200",
    31.   "header": {
    32.     "content-type":"applicaiton/json;charset=utf-8"
    33.   }
    34. }

page

  • index.css 
    1. page{
    2. 	height: 100%;
    3. 	background-color: #efeff4;
    4. }

swiper

  • index.wxml 
    1. <swiper indicator-dots="true" autoplay="true" circular="true" indicator-color="#fff" indicator-active-color="blue">
    2.    <block wx:for="{{images}}" wx:key="text">
    3.        <swiper-item>
    4.            <view class="swiper-item">
    5.               <image src="{{item.img}}" mode="scaleToFill"></image>
    6.            </view>
    7.        </swiper-item>
    8.    </block>
    9. </swiper>

  • index.css 
    1. swiper {
    2.   width: 100%;
    3.   height: calc(100vw*9/16);
    4. }
    5. .swiper-item>image {
    6.    width:100%;
    7. }

  • index.js 
    1. loadSwiperImgs(){
    2.      //请注意this的指向问题
    3.      let that=this;
    4.      wx.request({
    5.        url: api.SwiperImgs,
    6.        success(rs){
    7.          console.log(rs);
    8.          that.setData({
    9.             images:rs.data.images
    10.          });
    11.        }
    12.     })
    13. }

会议信息

  • mock数据 
    1. {
    2.   "data": {
    3.     "lists": [
    4.         {
    5.            "id": "1",
    6.           "image": "/static/persons/Snipaste_2024-02-18_20-39-17.png",
    7.           "title": "微信小程序会议OA_空空",
    8.           "num":"1314",
    9.           "state":"进行中",
    10.           "starttime": "2024-02-18 21:00:00",
    11.           "location": "湖南省——长沙市"
    12.         },
    13.         {
    14.           "id": "1",
    15.           "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
    16.           "title": "微信小程序会议OA_空空",
    17.           "num":"520",
    18.           "state":"已结束",
    19.           "starttime": "2024-02-18 12:00:00",
    20.           "location": "湖南省——长沙市"
    21.         },
    22.         {
    23.           "id": "1",
    24.           "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
    25.           "title": "微信小程序会议OA_空空",
    26.           "num":"888",
    27.           "state":"进行中",
    28.           "starttime": "2024-02-18 08:00:00",
    29.           "location": "湖南省——长沙市"
    30.         },
    31.         {
    32.           "id": "1",
    33.           "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
    34.           "title": "微信小程序会议OA_空空",
    35.           "num":"666",
    36.           "state":"已结束",
    37.           "starttime": "2024-02-18 08:00:00",
    38.           "location": "湖南省——长沙市"
    39.         },
    40.         {
    41.           "id": "1",
    42.           "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
    43.           "title": "微信小程序会议OA_空空",
    44.           "num":"999",
    45.           "state":"进行中",
    46.           "starttime": "2024-02-18 08:00:00",
    47.           "location": "湖南省——长沙市"
    48.         }
    49.       ]
    50.   },
    51.   "statusCode": "200",
    52.   "header": {
    53.     "content-type":"applicaiton/json;charset=utf-8"
    54.   }
    55. }

  • index.wxml 
    1. <view class="mobi-title">
    2.     <text class="mobi-icon"></text>
    3.     <text>会议信息</text>
    4. </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">
    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">{{item.state}}</view>
    14.                 <view class="join"><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>

  • index.js 
    1. loadMeetingInfos(){
    2.     let that=this;
    3.     wx.request({
    4.         url: api.MettingInfos,
    5.         dataType: 'json',
    6.         success(res) {
    7.           console.log(res)
    8.           that.setData({
    9.               lists:res.data.lists
    10.           })
    11.         }
    12.       })
    13.   }

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

会议OA项目-会议 

自定义tabs组件

 文档参考地址：自定义组件 | 微信开放文档

tabs.json

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

 tabs.wxml

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

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

 tabs.js

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

会议管理

list.json

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

list.wxml

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

list.wxss

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

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/Snipaste_2024-02-18_20-39-17.png',
  13.           'title': '微信小程序会议OA_空空',
  14.           'num':'1314',
  15.           'state':'进行中',
  16.           'time': '02月18日 21:00',
  17.           'address': '湖南省——长沙市'
  18.         },
  19.         {
  20.           'id': '1',
  21.           'image': '/static/persons/Snipaste_2024-02-18_20-40-00.png',
  22.           'title': '微信小程序会议OA_空空',
  23.           'num':'520',
  24.           'state':'已结束',
  25.           'time': '02月18日 21:00',
  26.           'address': '湖南省——长沙市'
  27.         },
  28.         {
  29.           'id': '1',
  30.           'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
  31.           'title': '微信小程序会议OA_空空',
  32.           'num':'666',
  33.           'state':'进行中',
  34.           'time': '02月18日 21:00',
  35.           'address': '湖南省——长沙市'
  36.         },
  37.         {
  38.           'id': '1',
  39.           'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
  40.           'title': '微信小程序会议OA_空空',
  41.           'num':'888',
  42.           'state':'已结束',
  43.           'time': '02月18日 21:00',
  44.           'address': '湖南省——长沙市'
  45.         },
  46.         {
  47.           'id': '1',
  48.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  49.           'title': '微信小程序会议OA_空空',
  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/Snipaste_2024-02-18_20-39-17.png',
  60.           'title': '微信小程序会议OA_空空',
  61.           'num':'304',
  62.           'state':'进行中',
  63.           'time': '10月09日 17:59',
  64.           'address': '深圳市·南山区'
  65.         },
  66.         {
  67.           'id': '1',
  68.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  69.           'title': '微信小程序会议OA_空空',
  70.           'num':'380',
  71.           'state':'已结束',
  72.           'time': '10月09日 17:39',
  73.           'address': '北京市·朝阳区'
  74.         },
  75.         {
  76.           'id': '1',
  77.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  78.           'title': '微信小程序会议OA_空空',
  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/Snipaste_2024-02-18_20-39-17.png',
  89.           'title': '微信小程序会议OA_空空',
  90.           'num':'304',
  91.           'state':'进行中',
  92.           'time': '10月09日 17:59',
  93.           'address': '深圳市·南山区'
  94.         },
  95.         {
  96.           'id': '1',
  97.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  98.           'title': '微信小程序会议OA_空空',
  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/Snipaste_2024-02-18_20-39-17.png',
  109.           'title': '微信小程序会议OA_空空',
  110.           'num':'304',
  111.           'state':'进行中',
  112.           'time': '10月09日 17:59',
  113.           'address': '深圳市·南山区'
  114.         },
  115.         {
  116.           'id': '1',
  117.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  118.           'title': '微信小程序会议OA_空空',
  119.           'num':'380',
  120.           'state':'已结束',
  121.           'time': '10月09日 17:39',
  122.           'address': '北京市·朝阳区'
  123.         },
  124.         {
  125.           'id': '1',
  126.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  127.           'title': '微信小程序会议OA_空空',
  128.           'num':'500',
  129.           'state':'进行中',
  130.           'time': '10月09日 17:31',
  131.           'address': '大连市'
  132.         },
  133.         {
  134.           'id': '1',
  135.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  136.           'title': '微信小程序会议OA_空空',
  137.           'num':'150',
  138.           'state':'已结束',
  139.           'time': '10月09日 17:21',
  140.           'address': '北京市·朝阳区'
  141.         },
  142.         {
  143.           'id': '1',
  144.           'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
  145.           'title': '微信小程序会议OA_空空',
  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. })

会议OA项目-投票

list.js

  1. // pages/vote/list/list.js
  2. var app = getApp();
  3. Page({
  4.  
  5.     /**
  6.      * 页面的初始数据
  7.      */
  8.     data: {
  9.         tabs:['全部','发起的','参与的'],
  10.         voteList:[
  11.             {
  12.                 id:1,
  13.                 title:'微信小程序会议OA_空空',
  14.                 votes:[
  15.                     {
  16.                         id:1,
  17.                         img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
  18.                         title:'A',
  19.                         mem:'A'
  20.                     },
  21.                     {
  22.                         id:2,
  23.                         img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
  24.                         title:'B',
  25.                         mem:'B'
  26.                     }
  27.                 ]
  28.             },
  29.             {
  30.                 id:1,
  31.                 title:'微信小程序会议OA_空空',
  32.                 votes:[
  33.                     {
  34.                         id:1,
  35.                         img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
  36.                         title:'B',
  37.                         mem:'B'
  38.                     },
  39.                     {
  40.                         id:2,
  41.                         img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
  42.                         title:'C',
  43.                         mem:'C'
  44.                     },
  45.                     {
  46.                         id:3,
  47.                         img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
  48.                         title:'D',
  49.                         mem:'X'
  50.                     },
  51.                     {
  52.                         id:4,
  53.                         img:'/static/persons/Snipaste_2024-02-18_20-39-17.png',
  54.                         title:'F',
  55.                         mem:'T'
  56.                     }
  57.                 ]
  58.             }
  59.         ]
  60.     },
  61.  
  62.     /**
  63.      * 生命周期函数--监听页面加载
  64.      */
  65.     onLoad(options) {
  66.  
  67.     },
  68.  
  69.     /**
  70.      * 生命周期函数--监听页面初次渲染完成
  71.      */
  72.     onReady() {
  73.  
  74.     },
  75.  
  76.     /**
  77.      * 生命周期函数--监听页面显示
  78.      */
  79.     onShow() {
  80.  
  81.     },
  82.  
  83.     /**
  84.      * 生命周期函数--监听页面隐藏
  85.      */
  86.     onHide() {
  87.  
  88.     },
  89.  
  90.     /**
  91.      * 生命周期函数--监听页面卸载
  92.      */
  93.     onUnload() {
  94.  
  95.     },
  96.  
  97.     /**
  98.      * 页面相关事件处理函数--监听用户下拉动作
  99.      */
  100.     onPullDownRefresh() {
  101.  
  102.     },
  103.  
  104.     /**
  105.      * 页面上拉触底事件的处理函数
  106.      */
  107.     onReachBottom() {
  108.  
  109.     },
  110.  
  111.     /**
  112.      * 用户点击右上角分享
  113.      */
  114.     onShareAppMessage() {
  115.  
  116.     },
  117.     tabsItemChange(e){
  118.         let index = e.detail.index;
  119.         console.log('vote.index='+index)
  120.         if(index==1 || index==2){
  121.             if (app.globalData.hasLogin) {
  122.                 
  123.             }else{
  124.                 wx.navigateTo({
  125.                   url: '/pages/auth/login/login',
  126.                 })
  127.             }
  128.         }
  129.     }
  130. })

会议OA项目-个人中心

index.wxml

  1. <view class="page-container">
  2.     <view class="user-info-container">
  3.         <view class="user-info"  bindtap="goLogin">
  4.             <image class="user-img" mode="scaleToFill" src="{{userInfo.avatarUrl}}" />
  5.             <text class="user-info-name">{{userInfo.nickName}}</text>
  6.         </view>
  7.         <image class="user-update" src="/static/tabBar/component.png" bindtap='goPages' data-url='/pages/ucenter/user/user'/>
  8.     </view>
  9.  
  10.     <view class="boundary" />
  11.     <view class="cells-container">
  12.         <view class="cell-wrap">
  13.             <image class="cell-icon" src="/static/tabBar/sdk.png" />
  14.             <text class="cell-text">我主持的会议</text>
  15.             <view class="cell-right">
  16.                 <view class="cell-list-num">{{metting_pubs}}</view>
  17.                 <view class="cell-arrow"></view>
  18.             </view>
  19.         </view>
  20.         <view class="cell-wrap">
  21.             <image class="cell-icon" src="/static/tabBar/sdk.png" />
  22.             <text class="cell-text">我参与的会议</text>
  23.             <view class="cell-right">
  24.                 <view class="cell-list-num">{{metting_joins}}</view>
  25.                 <view class="cell-arrow"></view>
  26.             </view>
  27.         </view>
  28.     </view>
  29.     <view class="boundary" />
  30.     <view class="cells-container">
  31.         <view class="cell-wrap">
  32.             <image class="cell-icon" src="/static/tabBar/sdk.png" />
  33.             <text class="cell-text">我发布的投票</text>
  34.             <view class="cell-right">
  35.                 <view class="cell-list-num">1</view>
  36.                 <view class="cell-arrow"></view>
  37.             </view>
  38.         </view>
  39.         <view class="cell-wrap">
  40.             <image class="cell-icon" src="/static/tabBar/sdk.png" />
  41.             <text class="cell-text">我参与的投票</text>
  42.             <view class="cell-right">
  43.                 <view class="cell-list-num">10</view>
  44.                 <view class="cell-arrow"></view>
  45.             </view>
  46.         </view>
  47.     </view>
  48.     <view class="boundary" />
  49.     <view class="cells-container">
  50.         <view class="cell-wrap">
  51.             <image class="cell-icon" src="/static/tabBar/template.png" />
  52.             <text class="cell-text">消息</text>
  53.             <view class="cell-right">
  54.                 <view class="cell-list-num"></view>
  55.                 <view class="cell-arrow"></view>
  56.             </view>
  57.         </view>
  58.         <view class="cell-wrap">
  59.             <image class="cell-icon" src="/static/tabBar/component.png" />
  60.             <text class="cell-text">设置</text>
  61.             <view class="cell-right">
  62.                 <view class="cell-list-num"></view>
  63.                 <view class="cell-arrow"></view>
  64.             </view>
  65.         </view>
  66.     </view>
  67. </view>

箭头样式：

  1. .cell-arrow {
  2.   width: 7px;
  3.   height: 7px;
  4.   border-width: 1px;
  5.   border-color: rgb(136, 136, 136);
  6.   border-style: none solid solid none;
  7.   transform: rotate(315deg);
  8. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/130729
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号