• 微信小程序开发的OA会议之会议，投票，个人中心的页面搭建及模板

    目录

    一.自定义组件

    1.1.创建 

    1.2.定义 

    1.3.编写

    1.4.使用

    二.会议

    2.1.数据

    2.2.显示 

    2.3. 样式

    三.个人中心

    3.1.页面

    3.2.样式

    四.投票

    4.1.引用

    4.2.数据

    4.3.页面

    4.4.样式

                    好啦今天就到这里了，希望能帮到你哦！！！

    一.自定义组件

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

    以下的代码都基于我博客中的 : 

    微信小程序的OA会议之首页搭建icon-default.png?t=N7T8https://blog.csdn.net/m0_74915426/article/details/133936420?spm=1001.2014.3001.5502

    1.1.创建 

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

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

    1.2.定义 

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

    在 tabs.json 中编写:  

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

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

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

    1.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 定义段时建议重新测试一下。

    二.会议

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

    2.1.数据

    在会议的 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.jpg',
    45.         'name' : ' 文总',
    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/2.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/20.jpg',
    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/11.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/17.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/19.jpg',
    137.         'name' : ' 李总 ',
    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. })

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

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

    效果:                         

                                                    

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

    三.个人中心

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

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

    效果图：

                                    

    四.投票

    4.1.引用

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

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

    4.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.jpg',
    45.         'name' : ' 文总',
    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/2.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/20.jpg',
    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/11.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/17.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/19.jpg',
    137.         'name' : ' 李总 ',
    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. })

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

    效果图：

                                            

                    好啦今天就到这里了，希望能帮到你哦！！！

  • 相关阅读:
    AVL树和红黑树的简单实现
    滑动平均窗口的定义，优点，缺点，以及目前的应用！！
    【Python Web】Flask框架（九）MYSQL+python案例
    新手使用gin 创建第一个接口
    网络安全分析——蠕虫病毒动态分析视图
    使用Python CV2自动识别人脸并融合至新图片
    性能提升 25 倍：Rust 有望取代 C 和 C++，成为机器学习首选 Python 后端
    算法基础--位运算
    基于QtGUI的宠物小精灵对战游戏设计
    前端--性能优化【上篇】--网络优化与页面渲染优化
  • 原文地址：https://blog.csdn.net/m0_74915426/article/details/133959147