• 【微信小程序开发】自定义组件以及页面布局设计

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    接下来看看由辉辉所写的关于小程序的相关操作吧

    目录

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    一.自定义组件的使用步骤（附实例）

    1.创建自定义组件

    2.在wxml中制定组件模板

    3.wxss中给模板设计样式

    4.js中定义组件的属性

    5.定义组件的相关事件

    6.在其他页面中使用组件

    二.个人中心的布局实现

    wxml

    wxss

    效果预览

    三.投票的布局设计 

    wxml

    wxss

    js

    效果预览

    一.自定义组件的使用步骤（附实例）

    1.创建自定义组件

    但我们如果使用的是最新版的微信开发工具，那么在我们新建了自定义组件之后，会出现一个错误

    这个是因为它在过滤检查文件，如何可能会出现错误，为了不干扰我们的开发，我们需要在project.config.json中写两行代码

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

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

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

    4.js中定义组件的属性

    5.定义组件的相关事件

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

    6.在其他页面中使用组件

    ①在对应使用的界面的json中引用自定义组件

    1. {
    2.   "usingComponents": { "tabs":"/components/tabs/tabs"},
    3.   "navigationBarTitleText": "会议"
    4. }

    ②在使用组件的wxml页面中使用组件

    "{{tabs}}"  bindtabsItemChange="tabsItemChange">

    ③定义属性值

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

    效果预览

    二.个人中心的布局实现

    wxml

    4. <view class="userInfo">
    5.     <image class="user-profile" src="/static/persons/1.jpg">image>
    6.     <text class="user-name">用户登录text>
    7.     <text class="user-click">修改text>
    8. view>
    9. <view class="item1">
    10.     <view class="box1">
    11.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    12.         <text class="box-title">我主持的会议text>
    13.         <text class="box-num">1text>
    14.         <text class="box-click">＞text>
    15.     view>
    16.     <view class="box2">
    17.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    18.         <text class="box-title">我参与的会议text>
    19.         <text class="box-num">1000text>
    20.         <text class="box-click">＞text>
    21.     view>
    22. view>
    23.  
    24. <view class="item2">
    25.     <view class="box1">
    26.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    27.         <text class="box-title">我发布的投票text>
    28.         <text class="box-num">12text>
    29.         <text class="box-click">＞text>
    30.     view>
    31.     <view class="box2">
    32.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    33.         <text class="box-title">我参与的投票text>
    34.         <text class="box-num">100text>
    35.         <text class="box-click">＞text>
    36.     view>
    37. view>
    38.  
    39.  
    40.  <view class="item3">
    41.     <view class="box1">
    42.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    43.         <text class="box-title">消息text>
    44.         <text class="boxs-click">＞text>
    45.     view>
    46.     <view class="box2">
    47.         <image src="/static/tabBar/sdk.png" class="box-icon">image>
    48.         <text class="box-title">设置text>
    49.         <text class="boxs-click">＞text>
    50.     view>
    51. view>  
    52.

    wxss

    1. /* pages/ucenter/index/index.wxss */
    2. .userInfo{
    3.   height:100px;
    4.   display: flex;
    5.   border-bottom: rgb(235, 234, 234) solid 6px;
    6. }
    7. .user-profile{
    8.   width: 80px;
    9.   height: 80px;
    10.   display: flex;
    11.   align-items: center;
    12. }
    13. .user-name{
    14.   font-weight: bolder;
    15.   display: flex;
    16.   align-items: center;
    17.  margin-left: 20px;
    18.  width: 450rpx;
    19. }
    20. .user-click{
    21.   display: flex;
    22.   align-items: center;
    23.   color: lightgray;
    24. }
    25. .item1{
    26.   /* /* display: flex; */
    27.   border-bottom: rgb(235, 234, 234) solid 6px; 
    28. }
    29. .box1{
    30.   height: 50px;
    31.   display: flex;
    32.   align-items: center;
    33.   border-bottom: rgb(235, 234, 234) solid 1px; 
    34. }
    35. .box2{
    36.   height: 50px;
    37.   display: flex;
    38.   align-items: center;
    39. }
    40. .box-icon{
    41.   width: 50rpx;
    42.   height: 50rpx;
    43.   margin-right: 10px;
    44. }
    45. .box-title{
    46.  
    47. }
    48. .box-num{
    49.   width: 20px;
    50.   margin-left: 180px;
    51. }
    52. .box-click{
    53.   margin-left: 20px;
    54.   color: lightgray;
    55. }
    56.  
    57.  
    58. .item2{
    59.   /* /* display: flex; */
    60.   border-bottom: rgb(235, 234, 234) solid 6px; 
    61. }
    62.  
    63.  
    64. .boxs-click{
    65.   margin-left: 282px;
    66.   color: lightgray;
    67. }
    68.

    效果预览

    三.投票的布局设计 

    wxml

    3.  
    4. <view class="info-title">
    5.   <image class="img-title"  src="../../../static/vote/sousuo.png">image>
    6.   <input  type="text" placeholder="选择所属会议" />
    7. view>
    8.  
    9. <view class="vote-button" bindtap="jumpToFoodPage">
    10.   <block wx:for="{{myvotelist}}" wx:key="index">
    11.     <view class="myvotes">
    12.       <view class="myimg">
    13.         <image class="vote-icon" src="{{item.img}}">image>
    14.       view>
    15.       <view class="myview">
    16.         <text class="vote-label">{{item.name}}text>
    17.       view>
    18.     view>
    19.   block>
    20.   <image class="vote-add" src="../../../static/vote/addvote.png">image>
    21. view>

    wxss

    1. // pages/vote/list/list.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     myvotelist:[
    9.      {index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},
    10.      {index:3, name:'历史投票',img:'../../../static/vote/voterecords-active.png'},
    11.      {index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},
    12.      {index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},
    13.    
    14.     ]
    15.   },
    16.  
    17.   /**
    18.    * 生命周期函数--监听页面加载
    19.    */
    20.   onLoad(options) {
    21.  
    22.   },
    23.  
    24.   /**
    25.    * 生命周期函数--监听页面初次渲染完成
    26.    */
    27.   onReady() {
    28.  
    29.   },
    30.  
    31.   /**
    32.    * 生命周期函数--监听页面显示
    33.    */
    34.   onShow() {
    35.  
    36.   },
    37.  
    38.   /**
    39.    * 生命周期函数--监听页面隐藏
    40.    */
    41.   onHide() {
    42.  
    43.   },
    44.  
    45.   /**
    46.    * 生命周期函数--监听页面卸载
    47.    */
    48.   onUnload() {
    49.  
    50.   },
    51.  
    52.   /**
    53.    * 页面相关事件处理函数--监听用户下拉动作
    54.    */
    55.   onPullDownRefresh() {
    56.  
    57.   },
    58.  
    59.   /**
    60.    * 页面上拉触底事件的处理函数
    61.    */
    62.   onReachBottom() {
    63.  
    64.   },
    65.  
    66.   /**
    67.    * 用户点击右上角分享
    68.    */
    69.   onShareAppMessage() {
    70.  
    71.   }
    72. })

    js

    1. // pages/vote/list/list.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     myvotelist:[
    9.      {index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},
    10.      {index:3, name:'投票记录',img:'../../../static/vote/voterecords-active.png'},
    11.      {index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},
    12.      {index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},
    13.    
    14.     ]
    15.   },
    16.  
    17.   /**
    18.    * 生命周期函数--监听页面加载
    19.    */
    20.   onLoad(options) {
    21.  
    22.   },
    23.  
    24.   /**
    25.    * 生命周期函数--监听页面初次渲染完成
    26.    */
    27.   onReady() {
    28.  
    29.   },
    30.  
    31.   /**
    32.    * 生命周期函数--监听页面显示
    33.    */
    34.   onShow() {
    35.  
    36.   },
    37.  
    38.   /**
    39.    * 生命周期函数--监听页面隐藏
    40.    */
    41.   onHide() {
    42.  
    43.   },
    44.  
    45.   /**
    46.    * 生命周期函数--监听页面卸载
    47.    */
    48.   onUnload() {
    49.  
    50.   },
    51.  
    52.   /**
    53.    * 页面相关事件处理函数--监听用户下拉动作
    54.    */
    55.   onPullDownRefresh() {
    56.  
    57.   },
    58.  
    59.   /**
    60.    * 页面上拉触底事件的处理函数
    61.    */
    62.   onReachBottom() {
    63.  
    64.   },
    65.  
    66.   /**
    67.    * 用户点击右上角分享
    68.    */
    69.   onShareAppMessage() {
    70.  
    71.   }
    72. })

    效果预览

    好啦，今天的分享就到这了，希望能够帮到你呢！😊😊  

  • 相关阅读:
    RCE 远程代码执行漏洞分析
    ESP32网络开发实例-将数据保存到InfluxDB时序数据库
    IP地址划分知识点总结
    ＜算法＞贪心策略设计并解决会场安排问题
    1004 Counting Leaves
    【k8s源码篇之Informer篇4】关于 Informer 的一些困惑点
    vue3中函数必须有返回值么？
    QTableWidget 详细使用指南
    记一次问题排查
    SpringCloud Alibaba之Sentinel配置
  • 原文地址：https://blog.csdn.net/m0_74315688/article/details/133902665