• 微信小程序自定义组件Tabs及会议管理，投票管理与个人中心开发指南

    目录

    前言

    一、自定义组件

    1.创建自定义组件

    2.使用自定义组件

    3.注意事项

    二、自定义组件tabs案例

     1.创建自定义组件

    2.文件内容的编写

    三、自定义组件tabs的使用和会议管理页面的搭建

    1.使用tabs组件

    2.在页面使用组件并添加事件

    3.页面搭建

    四、投票管理页面搭建

    五、个人中心页面搭建

    前言

            在微信小程序开发中，我们经常会遇到需要实现多个页面之间的切换和导航的需求。为了提高代码的复用性和可维护性，我们可以使用自定义组件来实现tabs功能。本文将介绍如何使用自定义组件tabs实现页面切换，并结合会议管理、投票管理和个人中心三个功能模块进行讲解。

    一、自定义组件

    从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

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

    1.创建自定义组件

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

    1. {
    2.   "component": true
    3. }

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

    代码示例：

    2. <view class="inner">
    3.   {{innerText}}
    4. view>
    5. <slot>slot>
    1. /* 这里的样式只应用于这个自定义组件 */
    2. .inner {
    3.   color: red;
    4. }

    注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

    在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

    组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器 。

    代码示例：

    1. Component({
    2.   properties: {
    3.     // 这里定义了innerText属性，属性值可以在组件使用时指定
    4.     innerText: {
    5.       type: String,
    6.       value: 'default value',
    7.     }
    8.   },
    9.   data: {
    10.     // 这里是一些组件内部数据
    11.     someData: {}
    12.   },
    13.   methods: {
    14.     // 这里是一个自定义方法
    15.     customMethod: function(){}
    16.   }
    17. })

    2.使用自定义组件

    使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

    1. {
    2.   "usingComponents": {
    3.     "component-tag-name": "path/to/the/custom/component"
    4.   }
    5. }

    这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

    开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

    代码示例：

    在开发者工具中预览效果

    1. <view>
    2.   
    3.   <component-tag-name inner-text="Some text">component-tag-name>
    4. view>

    自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。

    3.注意事项

    一些需要注意的细节：

    • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
    • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
    • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

    注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

    • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
    • 使用 usingComponents 时会多一些方法，如 selectComponent 。
    • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

    如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

    二、自定义组件tabs案例

     1.创建自定义组件

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

    注意：

    创建好之后，win7以上系统可能会出现以下错误

    解决方法：

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

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

    2.文件内容的编写

    tabs.json

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

    tabs.wxml

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

    tabs.wxss

    1. /* components/tabs/tabs.wxss */
    2. .tabs {
    3.     position: fixed;
    4.     top: 0;
    5.     width: 100%;
    6.     background-color: #fff;
    7.     z-index: 99;
    8.     border-bottom: 1px solid #efefef;
    9.     padding-bottom: 20rpx;
    10. }
    11.  
    12. .tabs_title {
    13.     width: 400rpx;
    14.     width: 90%;
    15.     display: flex;
    16.     font-size: 9pt;
    17.     padding: 0 20rpx;
    18. }
    19.  
    20. .title_item {
    21.     color: #999;
    22.     padding: 15rpx 0;
    23.     display: flex;
    24.     flex: 1;
    25.     flex-flow: column nowrap;
    26.     justify-content: center;
    27.     align-items: center;
    28. }
    29.  
    30. .item_active {
    31.     /* color:#ED8137; */
    32.     color: #000000;
    33.     font-size: 11pt;
    34.     font-weight: 800;
    35. }
    36.  
    37. .item_active1 {
    38.     /* color:#ED8137; */
    39.     color: #000000;
    40.     font-size: 11pt;
    41.     font-weight: 800;
    42.     border-bottom: 6rpx solid #333;
    43.     border-radius: 2px;
    44. }

    tabs.js

    1. // components/tabs/tabs.js
    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.             // debugger
    23.             // 获取索引
    24.             const {index} = e.currentTarget.dataset;
    25.             // 触发 
    26.             // this.triggerEvent("tabsItemChange",{index})
    27.             this.triggerEvent("tabsItemChange",{index:index})
    28.             this.setData({
    29.                 tabIndex:index
    30.             })
    31.           }
    32.     }
    33. })

    三、自定义组件tabs的使用和会议管理页面的搭建

    1.使用tabs组件

    在需要使用自定义组件的json中添加配置

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

    2.在页面使用组件并添加事件

    1. //wxml
    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. </tabs>

    js中定义变量和方法 

    1. tabs:['会议中','已完成','已取消','全部会议']
    2.  
    3.  
    4.  
    5.  
    6. tabsItemChange(e){
    7.         // debugger
    8.         let tolists;
    9.         if(e.detail.index==1){
    10.             tolists = this.data.lists1;
    11.         }else if(e.detail.index==2){
    12.             tolists = this.data.lists2;
    13.         }else{
    14.             tolists = this.data.lists3;
    15.         }
    16.         this.setData({
    17.             lists: tolists
    18.         })
    19.     }

    3.页面搭建

    页面搭建内容wxml

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

    样式设计wxss

    1. .list{
    2.     background-color: #fff;
    3.     display: flex;
    4.     margin: 10rpx;
    5.     padding: 10rpx;
    6. }
    7. .list-img,.video-img{
    8.     height: 150rpx;
    9.     width: 150rpx;
    10. }
    11. .list-img{
    12.     margin: 20rpx 0 0 0;
    13. }
    14. .list-detail{
    15.     margin: 0 0 0 15rpx;
    16.     
    17. }
    18. .list-title{
    19.     font-weight: 700;
    20. }
    21. .list-tag{
    22.     display: flex;
    23.     margin: 10px 0;
    24. }
    25. .state{
    26.     border: 2px solid lightskyblue;
    27.     padding: 2px;
    28.     color: lightskyblue;
    29. }
    30. .join{
    31.     border: 2px solid #fff;
    32.     padding: 2px;
    33.     margin: 0 0 0 20rpx;
    34.     color: gray;
    35. }
    36. .list-num{
    37.     color: red;
    38. }
    39. .list-info{
    40.     color: gray;
    41. }
    42. .bottom-line{
    43.     text-align: center;
    44.     margin-bottom: 10px;
    45. }

    模拟数据进行页面展示js

    1. // pages/meeting/list/list.js
    2. Page({
    3.  
    4.     /**
    5.      * 页面的初始数据
    6.      */
    7.     data: {
    8.         tabs:['会议中','已完成','已取消','全部会议']
    9.         ,lists: [
    10.             {
    11.               'id': '1',
    12.               'image': '/static/persons/1.jpg',
    13.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    14.               'num':'304',
    15.               'state':'进行中',
    16.               'time': '10月09日 17:59',
    17.               'address': '深圳市·南山区'
    18.             },
    19.             {
    20.               'id': '1',
    21.               'image': '/static/persons/2.jpg',
    22.               'title': 'AI WORLD 2016世界人工智能大会',
    23.               'num':'380',
    24.               'state':'已结束',
    25.               'time': '10月09日 17:39',
    26.               'address': '北京市·朝阳区'
    27.             },
    28.             {
    29.               'id': '1',
    30.               'image': '/static/persons/3.jpg',
    31.               'title': 'H100太空商业大会',
    32.               'num':'500',
    33.               'state':'进行中',
    34.               'time': '10月09日 17:31',
    35.               'address': '大连市'
    36.             },
    37.             {
    38.               'id': '1',
    39.               'image': '/static/persons/4.jpg',
    40.               'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    41.               'num':'150',
    42.               'state':'已结束',
    43.               'time': '10月09日 17:21',
    44.               'address': '北京市·朝阳区'
    45.             },
    46.             {
    47.               'id': '1',
    48.               'image': '/static/persons/5.jpg',
    49.               'title': '新质生活 · 品质时代 2016消费升级创新大会',
    50.               'num':'217',
    51.               'state':'进行中',
    52.               'time': '10月09日 16:59',
    53.               'address': '北京市·朝阳区'
    54.             }
    55.           ],
    56.           lists1: [
    57.             {
    58.               'id': '1',
    59.               'image': '/static/persons/1.jpg',
    60.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    61.               'num':'304',
    62.               'state':'进行中',
    63.               'time': '10月09日 17:59',
    64.               'address': '深圳市·南山区'
    65.             },
    66.             {
    67.               'id': '1',
    68.               'image': '/static/persons/2.jpg',
    69.               'title': 'AI WORLD 2016世界人工智能大会',
    70.               'num':'380',
    71.               'state':'已结束',
    72.               'time': '10月09日 17:39',
    73.               'address': '北京市·朝阳区'
    74.             },
    75.             {
    76.               'id': '1',
    77.               'image': '/static/persons/3.jpg',
    78.               'title': 'H100太空商业大会',
    79.               'num':'500',
    80.               'state':'进行中',
    81.               'time': '10月09日 17:31',
    82.               'address': '大连市'
    83.             }
    84.           ],
    85.           lists2: [
    86.             {
    87.               'id': '1',
    88.               'image': '/static/persons/1.jpg',
    89.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    90.               'num':'304',
    91.               'state':'进行中',
    92.               'time': '10月09日 17:59',
    93.               'address': '深圳市·南山区'
    94.             },
    95.             {
    96.               'id': '1',
    97.               'image': '/static/persons/2.jpg',
    98.               'title': 'AI WORLD 2016世界人工智能大会',
    99.               'num':'380',
    100.               'state':'已结束',
    101.               'time': '10月09日 17:39',
    102.               'address': '北京市·朝阳区'
    103.             }
    104.           ],
    105.           lists3: [
    106.             {
    107.               'id': '1',
    108.               'image': '/static/persons/1.jpg',
    109.               'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    110.               'num':'304',
    111.               'state':'进行中',
    112.               'time': '10月09日 17:59',
    113.               'address': '深圳市·南山区'
    114.             },
    115.             {
    116.               'id': '1',
    117.               'image': '/static/persons/2.jpg',
    118.               'title': 'AI WORLD 2016世界人工智能大会',
    119.               'num':'380',
    120.               'state':'已结束',
    121.               'time': '10月09日 17:39',
    122.               'address': '北京市·朝阳区'
    123.             },
    124.             {
    125.               'id': '1',
    126.               'image': '/static/persons/3.jpg',
    127.               'title': 'H100太空商业大会',
    128.               'num':'500',
    129.               'state':'进行中',
    130.               'time': '10月09日 17:31',
    131.               'address': '大连市'
    132.             },
    133.             {
    134.               'id': '1',
    135.               'image': '/static/persons/4.jpg',
    136.               'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    137.               'num':'150',
    138.               'state':'已结束',
    139.               'time': '10月09日 17:21',
    140.               'address': '北京市·朝阳区'
    141.             },
    142.             {
    143.               'id': '1',
    144.               'image': '/static/persons/5.jpg',
    145.               'title': '新质生活 · 品质时代 2016消费升级创新大会',
    146.               'num':'217',
    147.               'state':'进行中',
    148.               'time': '10月09日 16:59',
    149.               'address': '北京市·朝阳区'
    150.             }
    151.           ]
    152.     },
    153.  
    154.     /**
    155.      * 生命周期函数--监听页面加载
    156.      */
    157.     onLoad(options) {
    158.  
    159.     },
    160.  
    161.     /**
    162.      * 生命周期函数--监听页面初次渲染完成
    163.      */
    164.     onReady() {
    165.  
    166.     },
    167.  
    168.     /**
    169.      * 生命周期函数--监听页面显示
    170.      */
    171.     onShow() {
    172.  
    173.     },
    174.  
    175.     /**
    176.      * 生命周期函数--监听页面隐藏
    177.      */
    178.     onHide() {
    179.  
    180.     },
    181.  
    182.     /**
    183.      * 生命周期函数--监听页面卸载
    184.      */
    185.     onUnload() {
    186.  
    187.     },
    188.  
    189.     /**
    190.      * 页面相关事件处理函数--监听用户下拉动作
    191.      */
    192.     onPullDownRefresh() {
    193.  
    194.     },
    195.  
    196.     /**
    197.      * 页面上拉触底事件的处理函数
    198.      */
    199.     onReachBottom() {
    200.  
    201.     },
    202.  
    203.     /**
    204.      * 用户点击右上角分享
    205.      */
    206.     onShareAppMessage() {
    207.  
    208.     },
    209.     tabsItemChange(e){
    210.         // debugger
    211.         let tolists;
    212.         if(e.detail.index==1){
    213.             tolists = this.data.lists1;
    214.         }else if(e.detail.index==2){
    215.             tolists = this.data.lists2;
    216.         }else{
    217.             tolists = this.data.lists3;
    218.         }
    219.         this.setData({
    220.             lists: tolists
    221.         })
    222.     }
    223. })

    效果演示

    四、投票管理页面搭建

    这里我们也用到了tabs组件，这里就不过多介绍了

    在会议管理中我们是直接通过tabs组件中的内容进行点击获取查询到相应的信息，那我们又该如何去搭建每一个页面呢。

    我们就可以通过绑定变量的关系去设置内容

    1.   <view wx:if="{{activeTab === 0}}" style="margin-top: 50px;">
    2.   
    3. view>
    4.   <view wx:if="{{activeTab === 1}}" style="margin-top: 50px;">
    5.   
    6. view>
    7.   <view wx:if="{{activeTab === 2}}" style="margin-top: 50px;">
    8.   
    9. view>
    10.   <view wx:if="{{activeTab === 3}}" style="margin-top: 50px;">
    11.   
    12. view>

     然后在js定义该变量

    1. activeTab: 0, // 默认显示第一个tab的内容 
    2.  
    3. tabsItemChange(e){
    4.       let index =  e.detail.index;
    5.       this.setData({
    6.         activeTab: index
    7.       });
    8.     },

    页面搭建wxml

    1. <!--pages/vote/list/list.wxml-->
    2. <!-- <text>pages/vote/list/list.wxml</text> -->
    3. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    4. </tabs>
    5.   <view wx:if="{{activeTab === 0}}" style="margin-top: 50px;">
    6.   <!-- 发起投票的内容 -->
    7.   <view class="container">
    8.   <view class="title">投票名称</view>
    9.   <input class="input" placeholder="请输入投票名称" bindinput="onNameInput"/>
    10.   
    11.   <view class="title">投票描述</view>
    12.   <textarea class="textarea" placeholder="请输入投票描述" bindinput="onDescInput"></textarea>
    13.   
    14.   <view class="title">投票选项</view>
    15.   <view class="options">
    16.     <view wx:for="{{options}}" wx:key="{{index}}">
    17.       <input class="option-input" placeholder="请输入选项" value="{{item}}" bindinput="onOptionInput"/>
    18.       <button class="option-delete" wx:if="{{options.length > 2}}" data-index="{{index}}" bindtap="onOptionDelete">删除</button>
    19.     </view>
    20.     <button class="option-add" bindtap="onOptionAdd">添加选项</button>
    21.   </view>
    22.   
    23.   <view class="title">投票时间</view>
    24.   <view class="picker-put"> 
    25.   <picker mode="time" value="{{startTime}}" bindchange="onStartTimeChange">
    26.     <view class="picker1">{{startTime}}</view>
    27.   </picker>
    28.   <text class="tex">至</text>
    29.   <picker mode="time" value="{{endTime}}" bindchange="onEndTimeChange">
    30.     <view class="picker2">{{endTime}}</view>
    31.   </picker>
    32.   </view>
    33.  
    34.   
    35.   <view class="title">是否多选</view>
    36.   <checkbox-group bindchange="onMultiSelectChange">
    37.     <label class="checkbox-label">
    38.       <checkbox value="true" checked="{{multiSelect}}"/>
    39.       <text>开启</text>
    40.     </label>
    41.     <label class="checkbox-label">
    42.       <checkbox value="false" checked="{{!multiSelect}}"/>
    43.       <text>关闭</text>
    44.     </label>
    45.   </checkbox-group>
    46.   
    47.   <view class="title">投票前显示投票纪录</view>
    48.   <checkbox-group bindchange="onShowResultChange">
    49.     <label class="checkbox-label">
    50.       <checkbox value="true" checked="{{showResult}}"/>
    51.       <text>开启</text>
    52.     </label>
    53.     <label class="checkbox-label">
    54.       <checkbox value="false" checked="{{!showResult}}"/>
    55.       <text>关闭</text>
    56.     </label>
    57.   </checkbox-group>
    58.   
    59.   <view class="title">匿名投票</view>
    60.   <checkbox-group bindchange="onAnonymousChange">
    61.     <label class="checkbox-label">
    62.       <checkbox value="true" checked="{{anonymous}}"/>
    63.       <text>开启</text>
    64.     </label>
    65.     <label class="checkbox-label">
    66.       <checkbox value="false" checked="{{!anonymous}}"/>
    67.       <text>关闭</text>
    68.     </label>
    69.   </checkbox-group>
    70.   
    71.   <button class="submit" bindtap="onSubmit">提交</button>
    72. </view>
    73. </view>
    74.  
    75. <view wx:if="{{activeTab === 2}}" style="margin-top: 50px;">
    76.   <!-- 所有投票的内容 -->
    77.   <text>这里是所有投票的内容</text>
    78. </view>
    79.  
    80. <view wx:if="{{activeTab === 3}}" style="margin-top: 50px;">
    81.   <!-- 投票报表的内容 -->
    82.   <text>这里是投票报表的内容</text>
    83. </view>

    样式设计wxss

    1. /* pages/vote/list/list.wxss */
    2. /* vote.wxss文件内容 */
    3. .container {
    4.     padding: 20rpx;
    5.   }
    6.   
    7.   .title {
    8.     font-weight: 700;
    9.     font-size: 40rpx;
    10.     margin-top: 20rpx;
    11.   }
    12.   
    13.   .input {
    14.     border: 1rpx solid #ccc;
    15.     border-radius: 10rpx;
    16.     padding: 20rpx;
    17.     margin-top: 10rpx;
    18.     font-size: 28rpx;
    19.     padding-bottom: 10px;
    20.   }
    21.   
    22.   .textarea {
    23.     border: 1rpx solid #ccc;
    24.     border-radius: 10rpx;
    25.     padding: 10rpx;
    26.     margin-top: 10rpx;
    27.     font-size: 28rpx;
    28.   }
    29.   
    30.   .options {
    31.     margin-top: 10rpx;
    32.   }
    33.   
    34.   .option-input {
    35.     border: 1rpx solid #ccc;
    36.     border-radius: 10rpx;
    37.     padding: 20rpx;
    38.     margin-top: 10rpx;
    39.     font-size: 28rpx;
    40.     width: 80%;
    41.   }
    42.   
    43.   .option-delete {
    44.       width: 20rpx;
    45.       height: 70rpx;
    46.     background-color: #f00;
    47.     color: #fff;
    48.     border-radius: 10rpx;
    49.     padding: 10rpx;
    50.     margin: 10rpx;
    51.   }
    52.   
    53.   .option-add {
    54.     background-color: #09f;
    55.     color: #fff;
    56.     border-radius: 10rpx;
    57.     padding: 10rpx;
    58.     margin-top: 10rpx;
    59.   }
    60.   
    61.   .picker1,.picker2 {
    62.     border: 1rpx solid #ccc;
    63.     border-radius: 10rpx;
    64.     padding: 20rpx;
    65.     margin-top: 10rpx;
    66.     font-size: 28rpx;
    67.     text-align: center;
    68.     width: 100%;
    69.     
    70.   }
    71.   .picker1{
    72.       width: 20%;
    73.       padding-right: 50px;
    74.   }
    75.   .picker2{
    76.     width: 30%;
    77.     padding-left: 40px;
    78.     padding-right: 10px;
    79.     padding-bottom: 10px;
    80. }
    81. .tex{
    82.     padding: 0,5px,0,5px;
    83. }
    84.   .picker-put{
    85.       display: flex;
    86.       align-items: center;
    87.   }
    88.   .checkbox-label {
    89.       padding-bottom: 10px;
    90.     display: inline-flex;
    91.     align-items: center;
    92.     margin-right: 30rpx;
    93.   }
    94.   
    95.   .submit {
    96.     background-color: #09f;
    97.     color: #fff;
    98.     border-radius: 10rpx;
    99.     padding: 20rpx;
    100.     margin-top: 30rpx;
    101.     font-size: 32rpx;
    102.     width: 100%;
    103.   }
    104.   
    105.

    数据引入js

    1. // pages/vote/list/list.js
    2. Page({
    3.  
    4.     /**
    5.      * 页面的初始数据
    6.      */
    7.     data: {
    8.         tabs:['发起投票','我的投票','所有投票','投票报表'],
    9.         activeTab: 0, // 默认显示第一个tab的内容
    10.             name: '',
    11.             desc: '',
    12.             options: ['', ''],
    13.             startTime: '00:00',
    14.             endTime: '23:59',
    15.             multiSelect: false,
    16.             showResult: true,
    17.             anonymous: false
    18.   
    19.     },
    20.     
    21.     onNameInput(event) {
    22.         this.setData({
    23.           name: event.detail.value
    24.         })
    25.       },
    26.       
    27.       onDescInput(event) {
    28.         this.setData({
    29.           desc: event.detail.value
    30.         })
    31.       },
    32.       
    33.       onOptionInput(event) {
    34.         const index = event.currentTarget.dataset.index
    35.         const value = event.detail.value
    36.         const options = this.data.options
    37.         options[index] = value
    38.         this.setData({
    39.           options: options
    40.         })
    41.       },
    42.       
    43.       onOptionAdd() {
    44.         const options = this.data.options
    45.         options.push('')
    46.         this.setData({
    47.           options: options
    48.         })
    49.       },
    50.       
    51.       onOptionDelete(event) {
    52.         const index = event.currentTarget.dataset.index
    53.         const options = this.data.options
    54.         options.splice(index, 1)
    55.         this.setData({
    56.           options: options
    57.         })
    58.       },
    59.       
    60.       onStartTimeChange(event) {
    61.         this.setData({
    62.           startTime: event.detail.value
    63.         })
    64.       },
    65.       
    66.       onEndTimeChange(event) {
    67.         this.setData({
    68.           endTime: event.detail.value
    69.         })
    70.       },
    71.       
    72.       onMultiSelectChange(event) {
    73.         this.setData({
    74.           multiSelect: event.detail.value[0] === 'true'
    75.         })
    76.       },
    77.       
    78.       onShowResultChange(event) {
    79.         this.setData({
    80.           showResult: event.detail.value[0] === 'true'
    81.         })
    82.       },
    83.       
    84.       onAnonymousChange(event) {
    85.         this.setData({
    86.           anonymous: event.detail.value[0] === 'true'
    87.         })
    88.       },
    89.       
    90.       onSubmit() {
    91.         // TODO: 提交表单
    92.       },
    93.     tabsItemChange(e){
    94.       let index =  e.detail.index;
    95.       this.setData({
    96.         activeTab: index
    97.       });
    98.     },
    99.     
    100.     /**
    101.      * 生命周期函数--监听页面加载
    102.      */
    103.     onLoad(options){
    104.  
    105.     },
    106.  
    107.     /**
    108.      * 生命周期函数--监听页面初次渲染完成
    109.      */
    110.     onReady() {
    111.  
    112.     },
    113.  
    114.     /**
    115.      * 生命周期函数--监听页面显示
    116.      */
    117.     onShow() {
    118.  
    119.     },
    120.  
    121.     /**
    122.      * 生命周期函数--监听页面隐藏
    123.      */
    124.     onHide() {
    125.  
    126.     },
    127.  
    128.     /**
    129.      * 生命周期函数--监听页面卸载
    130.      */
    131.     onUnload() {
    132.  
    133.     },
    134.  
    135.     /**
    136.      * 页面相关事件处理函数--监听用户下拉动作
    137.      */
    138.     onPullDownRefresh() {
    139.  
    140.     },
    141.  
    142.     /**
    143.      * 页面上拉触底事件的处理函数
    144.      */
    145.     onReachBottom() {
    146.  
    147.     },
    148.  
    149.     /**
    150.      * 用户点击右上角分享
    151.      */
    152.     onShareAppMessage() {
    153.  
    154.     }
    155. })

    效果演示

    五、个人中心页面搭建

    wxml页面搭建

    1. <!--pages/ucenter/index/index.wxml-->
    2. <!-- <text>pages/ucenter/index/index.wxml</text> -->
    3. <view class="userInfo">
    4.     <image  class="user-head" src="/static/persons/8.jpg"></image>
    5.     <text class="user-name">孤留光乩</text>
    6.     <text class="user-edit">修改</text>
    7. </view>
    8. <view class="list">
    9.     <view class="list-item">
    10.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    11.         <text class="item-title">我主持的会议</text>
    12.         <text space="nbsp" class="item-num">1  </text>
    13.         <text class="item-detail">＞</text>
    14.     </view>
    15.     <view class="hr"></view>
    16.     <view class="list-item">
    17.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    18.         <text class="item-title">我参与的会议</text>
    19.         <text class="item-num">10</text>
    20.         <text class="item-detail">＞</text>
    21.     </view>
    22. </view>
    23. <view class="list">
    24.     <view class="list-item">
    25.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    26.         <text class="item-title">我发布的投票</text>
    27.         <text space="nbsp" class="item-num">1  </text>
    28.         <text class="item-detail">＞</text>
    29.     </view>
    30.     <view class="hr"></view>
    31.     <view class="list-item">
    32.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    33.         <text class="item-title">我参与的投票</text>
    34.         <text class="item-num">10</text>
    35.         <text class="item-detail">＞</text>
    36.     </view>
    37. </view>
    38. <view class="list">
    39.     <view class="list-item">
    40.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    41.         <text class="item-title">消息</text>
    42.         <text class="item-num"></text>
    43.         <text  space="nbsp" class="item-detail">   ＞</text>
    44.     </view>
    45.     <view class="hr"></view>
    46.     <view class="list-item">
    47.         <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    48.         <text class="item-title">设置</text>
    49.         <text space="emsp" class="item-num"></text>
    50.         <text  space="nbsp"  class="item-detail">   ＞</text>
    51.     </view>
    52. </view>

    样式设计wxss

    1. /* pages/ucenter/index/index.wxss */
    2. Page{
    3.     background-color: lightgray;
    4. }
    5. .userInfo{
    6.     display: flex;
    7.     background-color: #fff;
    8.     /* border: 1px solid red; */
    9.     padding: 20rpx;
    10. }
    11. .user-head{
    12.     width: 150rpx;
    13.     height: 150rpx;
    14. }
    15. .user-name,.user-edit{
    16.     display: flex;
    17.     align-items: center;
    18.     margin: 0 0 0 20rpx;
    19. }
    20. .user-name{
    21.     /* display: inline-block; */
    22.     width: 450rpx;
    23.     font-weight: 700;
    24. }
    25. .user-edit{
    26.     color: gray;
    27. }
    28. .list{
    29.     height: 280rpx;
    30.     width: 750rpx;
    31.     display: flex;
    32.     flex-direction: column;
    33. }
    34. .list-item{
    35.     /* height: 130rpx; */
    36. }
    37.  
    38. .item-icon{
    39.     height: 60rpx;
    40.     width: 60rpx;
    41.     margin-top: 20px; 
    42.     /* border: 1px solid red; */
    43. }
    44. .item-title,.item-num,.item-detail{
    45.     /* border: 1px solid red; */
    46.     position: relative;
    47.     top:-10px;
    48.     display: inline-block;
    49. }
    50. .item-title{
    51.     font-size: 18px;
    52.     width: 520rpx;
    53.     height: 25px;    
    54.     margin-left: 10px;
    55. }
    56. .item-num{
    57.     margin-right: 10px;
    58. }
    59. .item-detail{
    60.     color: gray;
    61. }
    62. .list .hr{
    63.     background-color: lightgray;
    64.     height: 1px;
    65.     width: 400px;
    66.     display: inline-block;
    67. }

    效果演示

  • 相关阅读:
    JavaEE学习——Java高级部分总结
    windows下app爬虫环境搭建：python + fiddler + Appium + 夜神模拟器
    计算机毕业设计Python+Django的监控管理系统(源码+系统+mysql数据库+Lw文档）
    卡尔曼滤波C++代码
    Biotinyl-εAhx-Amyloid β-Protein (1-42)，CAS: 1872440-40-8
    【opencv-c++】windows10系统安装OpenCV4.6.0
    【四十八讲】事件-监听器
    ES6-promise
    [watevrCTF-2019]Cookie Store
    企业数据泄漏事件频发，如何防止企业数据泄漏？
  • 原文地址：https://blog.csdn.net/weixin_74268571/article/details/133943137