• 微信小程序自定义组件及投票管理与个人中心界面搭建

    14天阅读挑战赛
    人生本来就没定义，任何的价值都是自己赋予。

    目录

    一、自定义tabs组件

    1.1 创建自定义组件

    1.2 tabs.wxml 编写组件界面

    1.3 tabs.wxss 设计样式

    1.4 tabs.js 定义组件的属性及事件

    二、自定义组件使用

    2.1 引用组件

    2.2 编写会议界面内容

    2.3 设计样式

    2.4 模拟数据并实现切换tabs方法

    2.5 效果展示

    三、投票管理界面搭建

    3.1 自定义投票列表组件

    3.2 引用组件

    3.3 编写投票界面内容

    3.4 设计样式

    3.5 模拟数据并实现切换列表方法

    3.6 效果图

    四、个人中心界面搭建

    4.1 WXML

    4.2 WXSS

    4.3 效果图

    一、自定义tabs组件

    1.1 创建自定义组件

    新建一个components文件夹 --> tabs文件夹 --> tabs文件

    创建好之后win7 以上的系统可能会报这个错误：

    解决方案：

    在project.config.json文件里添加两行配置

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

    1.2 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>

    1.3 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: 3px solid #efefef;
    9.   padding-bottom: 20rpx;
    10. }
    11.  
    12. .tabs_title {
    13.   /* width: 400rpx; */
    14.   width: 95%;
    15.   display: flex;
    16.   font-size: 13pt;
    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. }

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

    二、自定义组件使用

    2.1 引用组件

    在需要使用自定义组件的json中进行配置引用路径

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

    2.2 编写会议界面内容

    在界面使用组件并添加事件:

    <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    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>

    2.3 设计样式

    1. /* pages/meeting/list/list.wxss */
    2. /**list.wxss**/
    3. .userinfo {
    4.   display: flex;
    5.   flex-direction: column;
    6.   align-items: center;
    7.   color: #aaa;
    8. }
    9.  
    10. .userinfo-avatar {
    11.   overflow: hidden;
    12.   width: 128rpx;
    13.   height: 128rpx;
    14.   margin: 20rpx;
    15.   border-radius: 50%;
    16. }
    17.  
    18. .usermotto {
    19.   margin-top: 200px;
    20. }
    21.  
    22. /**index.wxss**/
    23. .section {
    24.   color: #aaa;
    25.   display: flex;
    26.   justify-content: center;
    27. }
    28.  
    29. .list-info {
    30.   color: #aaa;
    31. }
    32.  
    33. .list-num {
    34.   color: red;
    35.   /* font-weight: 700; */
    36. }
    37.  
    38. .join {
    39.   padding: 0px 0px 0px 10px;
    40.   color: #aaa;
    41. }
    42.  
    43. .state {
    44.   margin: 0px 6px 0px 6px;
    45.   border: 1px solid #4083ff;
    46.   color: #4083ff;
    47.   padding: 3px 5px 3px 5px;
    48. }
    49.  
    50. .list-tag {
    51.   padding: 3px 0px 10px 0px;
    52.   display: flex;
    53.   align-items: center;
    54. }
    55.  
    56. .list-title {
    57.   display: flex;
    58.   justify-content: space-between;
    59.   font-size: 11pt;
    60.   color: #333;
    61.   font-weight: bold;
    62.  
    63.  
    64. }
    65.  
    66. .list-detail {
    67.   display: flex;
    68.   flex-direction: column;
    69.   margin: 0px 0px 0px 15px;
    70. }
    71.  
    72. .video-img {
    73.   margin-top: 5px;
    74.   width: 80px;
    75.   height: 80px;
    76. }
    77.  
    78. .list {
    79.   display: flex;
    80.   flex-direction: row;
    81.   background-color: seashell;
    82.   border-bottom: 1px solid #cecece;
    83.   padding: 10px;
    84. }
    85.  
    86. .mobi-text {
    87.   font-weight: 700;
    88.   padding: 15px;
    89. }
    90.  
    91. /* .mobi-icon {
    92.   border-left: 5px solid #57f564;
    93. } */
    94. .indexbg{
    95.     background-color: rgba(219, 219, 219, 0.678);
    96. }
    97.  
    98. .mobi-title {
    99.   /* background-color: rgba(219, 219, 219, 0.678); */
    100.   margin: 10px 0px 10px 0px;
    101. }
    102.  
    103. .swiper-item {
    104.   height: 300rpx;
    105.   width: 100%;
    106.   border-radius: 10rpx;
    107. }
    108.  
    109. .userinfo {
    110.   display: flex;
    111.   flex-direction: column;
    112.   align-items: center;
    113.   color: #aaa;
    114. }
    115.  
    116. .userinfo-avatar {
    117.   overflow: hidden;
    118.   width: 128rpx;
    119.   height: 128rpx;
    120.   margin: 20rpx;
    121.   border-radius: 50%;
    122. }
    123.  
    124. .usermotto {
    125.   margin-top: 200px;
    126. }

    2.4 模拟数据并实现切换tabs方法

    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.png',
    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.   //列表切换事件
    169.   tabsItemChange(e){
    170.       let tolists;
    171.       if(e.detail.index==1){
    172.           tolists = this.data.lists1;
    173.       }else if(e.detail.index==2){
    174.           tolists = this.data.lists2;
    175.       }else{
    176.           tolists = this.data.lists3;
    177.       }
    178.       this.setData({
    179.           lists: tolists
    180.       })
    181.   },
    182.  
    183.   /**
    184.    * 生命周期函数--监听页面隐藏
    185.    */
    186.   onHide() {
    187.  
    188.   },
    189.  
    190.   /**
    191.    * 生命周期函数--监听页面卸载
    192.    */
    193.   onUnload() {
    194.  
    195.   },
    196.  
    197.   /**
    198.    * 页面相关事件处理函数--监听用户下拉动作
    199.    */
    200.   onPullDownRefresh() {
    201.  
    202.   },
    203.  
    204.   /**
    205.    * 页面上拉触底事件的处理函数
    206.    */
    207.   onReachBottom() {
    208.  
    209.   },
    210.  
    211.   /**
    212.    * 用户点击右上角分享
    213.    */
    214.   onShareAppMessage() {
    215.  
    216.   }
    217. })

    2.5 效果展示

    三、投票管理界面搭建

    3.1 自定义投票列表组件

     操作同目录一：

    3.2 引用组件

    在需要使用自定义组件的json中进行配置引用路径

    1. {
    2.   "usingComponents": {
    3.     "voteTabs":"/components/voteTabs/tabTabs",
    4.     "searchbar": "/components/searchbar/searchbar"
    5.   }
    6. }

    这里的searchbar是一个搜索组件，需要的私...

    3.3 编写投票界面内容

    2. <voteTabs tabList="{{voteTabs}}"  bindtabsItemChange="tabsItemChange">voteTabs>
    3. <view style="height: 100rpx;">view>
    4. <searchbar placeholder="输入会议标题" bind:handleSearch="handleSearch">searchbar>
    5. <view class="oaFlex">
    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> 
    21. view>

    3.4 设计样式

    1. /* pages/vote/list/list.wxss */
    2. .oaFlex{
    3.   display: flex;
    4.   flex-direction: column;
    5.   align-items: center;
    6. }
    7.  
    8. .list {
    9.   width: 360px;
    10.   display: flex;
    11.   flex-direction: column;
    12.   align-items: center;
    13.   background-color: rgb(228, 240, 253);
    14.   border-bottom: 2px solid #d9dbe2;
    15.   margin-bottom: 25px;
    16. }
    17.  
    18. .video-img {
    19.   width: 360px;
    20.   height: 150px;
    21. }
    22.  
    23. .list-detail {
    24.   display: flex;
    25.   flex-direction: column;
    26.   align-items: center;
    27. }
    28.  
    29. .list-title {
    30.   font-size: 12pt;
    31.   color: #333;
    32.   font-weight: bold;
    33. }
    34.  
    35. .list-info {
    36.   color: #aaa;
    37. }
    38.  
    39. .list-num {
    40.   color: red;
    41.   /* font-weight: 700; */
    42. }
    43.  
    44. .join {
    45.   padding: 0px 0px 0px 10px;
    46.   color: #aaa;
    47. }
    48.  
    49. .state {
    50.   margin: 0px 6px 0px 6px;
    51.   border: 1px solid #4083ff;
    52.   color: #4083ff;
    53.   padding: 3px 5px 3px 5px;
    54. }
    55.  
    56. .list-tag {
    57.   padding: 3px 0px 10px 0px;
    58.   display: flex;
    59.   align-items: center;
    60. }

    3.5 模拟数据并实现切换列表方法

    1. // pages/meeting/vote/list.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     voteTabs:['全部投票','发布的','参与的'],
    9.     lists: [
    10.       {
    11.         'id': '1',
    12.         'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDw69bhBSjulrWKBTDABzicBA!800x800.png?_tm=3&v=1556100764632',
    13.         'title': '2023招募开发工程师 | 深圳·北京PM大会 ',
    14.         'num':'24',
    15.         'state':'进行中',
    16.         'time': '10月21日 17:59',
    17.         'address': '深圳市·南山区'
    18.       },
    19.       {
    20.         'id': '1',
    21.         'image': 'https://img.zcool.cn/community/01e71e61e7c7ba11013e8cd0236304.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
    22.         'title': '隔空对话 | 国潮主理人大会',
    23.         'num':'380',
    24.         'state':'已结束',
    25.         'time': '10月09日 17:39',
    26.         'address': '北京市·朝阳区'
    27.       },
    28.       {
    29.         'id': '1',
    30.         'image': 'https://img.51miz.com/Templet/00/20/68/42/206842_5b3fc9bfb569c4cf1865d2006e5b9e17_1365.jpg',
    31.         'title': 'iphone 新品发布会主持人员安排',
    32.         'num':'500',
    33.         'state':'进行中',
    34.         'time': '10月20日 17:31',
    35.         'address': '上海'
    36.       }
    37.     ],
    38.     lists1: [
    39.       {
    40.         'id': '1',
    41.         'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDw69bhBSjulrWKBTDABzicBA!800x800.png?_tm=3&v=1556100764632',
    42.         'title': '2023招募开发工程师 | 深圳·北京PM大会 ',
    43.         'num':'24',
    44.         'state':'进行中',
    45.         'time': '10月21日 17:59',
    46.         'address': '深圳市·南山区'
    47.       },
    48.       {
    49.         'id': '1',
    50.         'image': 'https://img.zcool.cn/community/01e71e61e7c7ba11013e8cd0236304.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',
    51.         'title': '隔空对话 | 国潮主理人大会',
    52.         'num':'380',
    53.         'state':'已结束',
    54.         'time': '10月09日 17:39',
    55.         'address': '北京市·朝阳区'
    56.       },
    57.       {
    58.         'id': '1',
    59.         'image': 'https://img.51miz.com/Templet/00/20/68/42/206842_5b3fc9bfb569c4cf1865d2006e5b9e17_1365.jpg',
    60.         'title': 'iphone 新品发布会主持人员安排',
    61.         'num':'500',
    62.         'state':'进行中',
    63.         'time': '10月20日 17:31',
    64.         'address': '上海'
    65.       }
    66.     ],
    67.     lists2: [
    68.       {
    69.         'id': '1',
    70.         'image': 'https://bpic.588ku.com/Templet_origin_pic/05/08/59/20760ea806f4a490f73c577d69e8ffe8.jpg',
    71.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    72.         'num':'304',
    73.         'state':'进行中',
    74.         'time': '10月09日 17:59',
    75.         'address': '深圳市·南山区'
    76.       },
    77.       {
    78.         'id': '1',
    79.         'image': 'https://img-u-2.51miz.com/Templet/00/18/17/65/181765_bbf22358519e77310bda1f7457500141.jpg',
    80.         'title': 'AI WORLD 2016世界人工智能大会',
    81.         'num':'380',
    82.         'state':'已结束',
    83.         'time': '10月09日 17:39',
    84.         'address': '北京市·朝阳区'
    85.       }
    86.     ],
    87.     lists3: [
    88.       {
    89.         'id': '1',
    90.         'image': 'https://bpic.588ku.com/Templet_origin_pic/05/08/59/20760ea806f4a490f73c577d69e8ffe8.jpg',
    91.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    92.         'num':'304',
    93.         'state':'进行中',
    94.         'time': '10月09日 17:59',
    95.         'address': '深圳市·南山区'
    96.       },
    97.       {
    98.         'id': '1',
    99.         'image': 'https://1.s91i.faiusr.com/4/AFsI4uYPEAQYACDv69bhBSiCruq3BTDABzicBA!800x800.png?v=1556100745578',
    100.         'title': 'AI WORLD 2016世界人工智能大会',
    101.         'num':'380',
    102.         'state':'已结束',
    103.         'time': '10月09日 17:39',
    104.         'address': '北京市·朝阳区'
    105.       },
    106.       {
    107.         'id': '1',
    108.         'image': 'https://ts1.cn.mm.bing.net/th/id/R-C.022f2e37a033ca3c5754d2f32e8132a1?rik=9ysyMcx6nMOilg&riu=http%3a%2f%2fres.picxiaobai.com%2ftxb%2ftemplate%2fpre%2f20200517%2fd7580b5326b45a612dbf2c1904bc6ca2.jpg%3fv%3d1589705812%26x-oss-process%3dimage%2fresize%2cw_500&ehk=mHQV45sPbW8QB5iv%2ftSXZeasTn4bN6d%2bdLOtwiOYpl8%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    109.         'title': 'H100太空商业大会',
    110.         'num':'500',
    111.         'state':'进行中',
    112.         'time': '10月09日 17:31',
    113.         'address': '大连市'
    114.       },
    115.       {
    116.         'id': '1',
    117.         'image': 'https://img.tukuppt.com/ad_preview/00/10/75/5d78cd9a6a9b4.jpg!/fw/780',
    118.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    119.         'num':'150',
    120.         'state':'已结束',
    121.         'time': '10月09日 17:21',
    122.         'address': '北京市·朝阳区'
    123.       },
    124.       {
    125.         'id': '1',
    126.         'image': 'https://img-u-2.51miz.com/Templet/00/18/17/65/181765_bbf22358519e77310bda1f7457500141.jpg',
    127.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    128.         'num':'217',
    129.         'state':'进行中',
    130.         'time': '10月09日 16:59',
    131.         'address': '北京市·朝阳区'
    132.       }
    133.     ]
    134.   },
    135.   /**
    136.    * 生命周期函数--监听页面加载
    137.    */
    138.   onLoad(options) {
    139.  
    140.   },
    141.  
    142.  
    143.   /**
    144.    * 生命周期函数--监听页面显示
    145.    */
    146.   onShow() {
    147.  
    148.   },
    149.  
    150.   //列表切换事件
    151.   tabsItemChange(e){
    152.       let tolists = null;
    153.       if(e.detail.index==0){
    154.           tolists = this.data.lists1;
    155.       }else if(e.detail.index==1){
    156.           tolists = this.data.lists2;
    157.       }else{
    158.           tolists = this.data.lists3;
    159.       }
    160.       this.setData({
    161.           lists: tolists
    162.       })
    163.   },
    164.  
    165.   /**
    166.    * 生命周期函数--监听页面隐藏
    167.    */
    168.   onHide() {
    169.  
    170.   },
    171.  
    172.   /**
    173.    * 生命周期函数--监听页面卸载
    174.    */
    175.   onUnload() {
    176.  
    177.   },
    178.  
    179.   /**
    180.    * 页面相关事件处理函数--监听用户下拉动作
    181.    */
    182.   onPullDownRefresh() {
    183.  
    184.   },
    185.  
    186.   /**
    187.    * 页面上拉触底事件的处理函数
    188.    */
    189.   onReachBottom() {
    190.  
    191.   },
    192.  
    193.   /**
    194.    * 用户点击右上角分享
    195.    */
    196.   onShareAppMessage() {
    197.  
    198.   }
    199. })

    3.6 效果图

    四、个人中心界面搭建

    4.1 WXML

    2. <view class="userInfo">
    3.     <image class="userInfo-head" src="/static/images/avatar.png">image>
    4.     <text class="userInfo-login">云村小威text>
    5. view>
    6.  
    7. <view class="cells">
    8.     <view class="cell-items">
    9.         <image src="/static/tabBar/oa.png" class="cell-items-icon">image>
    10.         <text class="cell-items-title">我主持的会议text>
    11.         <text class="cell-items-num">1text>
    12.         <text class="cell-items-detail">＞text>
    13.     view>
    14.     <hr/>
    15.     <view class="cell-items">
    16.         <image src="/static/tabBar/myoa.png" class="cell-items-icon">image>
    17.         <text class="cell-items-title">我参与的会议text>
    18.         <text class="cell-items-num">1text>
    19.         <text class="cell-items-detail">＞text>
    20.     view>
    21. view>
    22. <view class="cells">
    23.     <view class="cell-items">
    24.         <image src="/static/tabBar/putpassage.png" class="cell-items-icon">image>
    25.         <text class="cell-items-title">我发布的投票text>
    26.         <text class="cell-items-num">1text>
    27.         <text class="cell-items-detail">＞text>
    28.     view>
    29.     <hr/>
    30.     <view class="cell-items">
    31.         <image src="/static/tabBar/passage.png" class="cell-items-icon">image>
    32.         <text class="cell-items-title">我参与的投票text>
    33.         <text class="cell-items-num">1text>
    34.         <text class="cell-items-detail">＞text>
    35.     view>
    36. view>
    37. <view class="cells">
    38.     <view class="cell-items">
    39.         <image src="/static/tabBar/message.png" class="cell-items-icon">image>
    40.         <text space="ensp" class="cell-items-title">消        息text>
    41.         <text class="cell-items-num">1text>
    42.         <text class="cell-items-detail">＞text>
    43.     view>
    44.     <hr/>
    45.     <view class="cell-items">
    46.         <image src="/static/tabBar/设置.png" class="cell-items-icon">image>
    47.         <text space="ensp" class="cell-items-title">设        置text>
    48.         <text class="cell-items-num">1text>
    49.         <text class="cell-items-detail">＞text>
    50.     view>
    51. view>

    4.2 WXSS

    1. /* pages/ucenter/index/index.wxss */
    2. Page{
    3.   background-color: rgba(159, 212, 245, 0.075);
    4. }
    5. .userInfo{
    6.   display: flex;
    7.   flex-direction:column;
    8.   align-items: center;
    9.   height: 350rpx;
    10.   width: 100%;
    11.   background-color: #fff;
    12.   margin-bottom: 20rpx;
    13.   
    14. }
    15. .userInfo-head{
    16.   width: 200rpx;
    17.   height: 200rpx;
    18.   border-radius: 50%;
    19.   overflow:hidden;
    20.   margin: 11px 20rpx;
    21. }
    22. .userInfo-login{
    23.   margin: 15px 20rpx;
    24. }
    25. .userInfo-set{
    26.   height: 100rpx;
    27.   width: 100rpx;
    28.   margin:120rpx 20rpx;
    29. }
    30.  
    31. .cells{
    32.   background-color: #fff;
    33.   height: 270rpx;
    34.   margin-bottom: 30rpx;
    35. }
    36. .cell-items{
    37.   height: 110rpx;
    38.   display: flex;
    39.   margin: 20rpx 0 0 0;
    40.   align-items: center;
    41.   /* border-bottom: 1px solid lightskyblue; */
    42. }
    43. .cell-items-icon{
    44.   height: 70rpx;
    45.   width: 70rpx;
    46.   margin: 0rpx 0 0 15rpx;
    47. }
    48. .cell-items-title{
    49.   font-weight: 700;
    50.   font-size: 18px;
    51.   margin: 0rpx 0 0 30rpx;
    52. }
    53. .cell-items-num{
    54.   margin: 0 0 0 335rpx;
    55. }
    56. .cell-items-detail{
    57.   margin: 0 0 0 20rpx;
    58. }
    59.  
    60. .cells > hr{
    61.   display: block;
    62.   height: 1px;
    63.   background-color: rgba(135, 206, 250, 0.075);
    64. }

    4.3 效果图

  • 相关阅读:
    spring-aop-execution表达式
    k8s、数据存储
    VC++程序崩溃时，使用Visual Studio静态分析dump文件
    降水检验项目展示（工作机会/私活请私信我）
    Spark任务调度
    学会这些分析定位BUG小技巧，你离跨入中级测试还远吗？
    内网渗透-内置工具横向移动
    transformer系列3---transformer结构参数量统计
    CCF计算机资格认证模拟题202303-2垦田计划
    【算法刷题】【反转链表】给定一个单链表的头结点pHead(该头节点是有值的，比如在下图，它的val是1)，长度为n，反转该链表后，返回新链表的表头。
  • 原文地址：https://blog.csdn.net/Justw320/article/details/133897878