小程序中如何使用自定义组件应用及搭建个人中心布局

一，自定义组件

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

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

创建自定义组件

1.1 建立文件

1.2 修改文件及添加文件

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

首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

tabs.json:

在project.config.json添加行代码 :

二，个人中心布局

2.1 创建自定义组件

tabs.wxml：

                        {{item}}                                        

tabs.wxss:

.tabs {    position: fixed;    top: 0;    width: 100%;    background-color: #fff;    z-index: 99;    border-bottom: 1px solid #efefef;    padding-bottom: 20rpx;} .tabs_title {        width: 90%;    display: flex;    font-size: 9pt;    padding: 0 20rpx;} .title_item {    color: #999;    padding: 15rpx 0;    display: flex;    flex: 1;    flex-flow: column nowrap;    justify-content: center;    align-items: center;} .item_active {        color: #000000;    font-size: 11pt;    font-weight: 800;} .item_active1 {        color: #000000;    font-size: 11pt;    font-weight: 800;    border-bottom: 6rpx solid #333;    border-radius: 2px;}

 tabs.js:

var App = getApp();Component({    properties: {    tabList:Object  },     data: {    tabIndex:0  },     methods: {    handleItemTap(e){      // 获取索引      const {index} = e.currentTarget.dataset;      // 触发 父组件的事件      this.triggerEvent("tabsItemChange",{index})      this.setData({          tabIndex:index      })    }  }})

 2.2 使用自定义组件

需要在哪个页面中进行使用，就需要在哪个页面中进行引用配置.

比如说 : 需要在会议页面中进行使用，就要在会议页面.json (meeting/list/list.json）下配置即可。

本案例是配置在会议模块中，那就是在.json (meeting/list/list.json）中配置。

meeting目录下的list.json:

{  "usinGComponents": {    "tabs": "/components/tabs/tabs"  }}

meeting目录下的list.js的data中定义属性:

 tabs:['会议中','已完成','已取消','全部会议']

meeting目录下的list.wxml:

效果：

2.3 会议模块布局

    点击相应的内容显示相应的数据，我们只需将所点击内容的index值传递，根据index值的不同进行不同数据的遍历即可

2.3.1 数据

在list.js定义：

// pages/meeting/list/list.jsPage({     data: {    tabs:['会议中','已完成','已取消','全部会议'],    lists: [      {        'id': '1',        'image': '/static/persons/1.jpg',        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',        'num':'304',        'state':'进行中',        'time': '10月09日 17:59',        'address': '深圳市·南山区'      },      {        'id': '2',        'image': '/static/persons/2.jpg',        'title': 'ai WORLD 2016世界人工智能大会',        'num':'380',        'state':'进行中',        'time': '10月09日 17:39',        'address': '北京市·朝阳区'      },      {        'id': '3',        'image': '/static/persons/3.jpg',        'title': 'H100太空商业大会',        'num':'500',        'state':'进行中',        'time': '10月09日 17:31',        'address': '大连市'      },      {        'id': '1',        'image': '/static/persons/4.jpg',        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',        'num':'150',        'state':'进行中',        'time': '10月09日 17:21',        'address': '北京市·朝阳区'      },      {        'id': '1',        'image': '/static/persons/5.jpg',        'title': '新质生活 · 品质时代 2016消费升级创新大会',        'num':'217',        'state':'进行中',        'time': '10月09日 16:59',        'address': '北京市·朝阳区'      }    ],    lists1: [      {        'id': '1',        'image': '/static/persons/7.jpg',        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',        'num':'304',        'state':'已结束',        'time': '10月09日 17:59',        'address': '深圳市·南山区'      },      {        'id': '1',        'image': '/static/persons/6.jpg',        'title': 'AI WORLD 2016世界人工智能大会',        'num':'380',        'state':'已结束',        'time': '10月09日 17:39',        'address': '北京市·朝阳区'      },      {        'id': '1',        'image': '/static/persons/1.jpg',        'title': 'H100太空商业大会',        'num':'500',        'state':'已结束',        'time': '10月09日 17:31',        'address': '大连市'      }    ],    lists2: [      {        'id': '1',        'image': '/static/persons/4.jpg',        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',        'num':'304',        'state':'进行中',        'time': '10月09日 17:59',        'address': '深圳市·南山区'      },      {        'id': '1',        'image': '/static/persons/3.jpg',        'title': 'AI WORLD 2016世界人工智能大会',        'num':'380',        'state':'已结束',        'time': '10月09日 17:39',        'address': '北京市·朝阳区'      }    ],    lists3: [      {        'id': '1',        'image': '/static/persons/7.jpg',        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',        'num':'304',        'state':'进行中',        'time': '10月09日 17:59',        'address': '深圳市·南山区'      },      {        'id': '1',        'image': '/static/persons/2.jpg',        'title': 'AI WORLD 2016世界人工智能大会',        'num':'380',        'state':'已结束',        'time': '10月09日 17:39',        'address': '北京市·朝阳区'      },      {        'id': '1',        'image': '/static/persons/4.jpg',        'title': 'H100太空商业大会',        'num':'500',        'state':'进行中',        'time': '10月09日 17:31',        'address': '大连市'      },      {        'id': '1',        'image': '/static/persons/5.jpg',        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',        'num':'150',        'state':'已结束',        'time': '10月09日 17:21',        'address': '北京市·朝阳区'      },      {        'id': '1',        'image': '/static/persons/1.jpg',        'title': '新质生活 · 品质时代 2016消费升级创新大会',        'num':'217',        'state':'进行中',        'time': '10月09日 16:59',        'address': '北京市·朝阳区'      }    ]  },  tabsItemChange(e){    let tolists;    if(e.detail.index==1){        tolists = this.data.lists1;    }else if(e.detail.index==2){        tolists = this.data.lists2;    }else{        tolists = this.data.lists3;    }    this.setData({        lists: tolists    })},    onLoad(options) {   },     onReady() {   },     onShow() {   },     onHide() {   },     onUnload() {   },     onPullDownRefresh() {   },     onReachBottom() {   },     onShareAppMessage() {   }})

2.1.2 显示

在list.wxml定义：

                                                    {{item.title}}                            {{item.state}}                {{item.num}}人报名                        {{item.address}}|{{item.time}}             到底啦

2.1.3 样式

在list.wxss定义：

.list {  display: flex;  flex-direction: row;  width: 100%;  padding: 0 20rpx 0 0;  border-top: 1px solid #eeeeee;  background-color: #fff;  margin-bottom: 5rpx;  } .list-img {  display: flex;  margin: 10rpx 10rpx;  width: 150rpx;  height: 220rpx;  justify-content: center;  align-items: center;} .list-img .video-img {  width: 120rpx;  height: 120rpx;  } .list-detail {  margin: 10rpx 10rpx;  display: flex;  flex-direction: column;  width: 600rpx;  height: 220rpx;} .list-title text {  font-size: 11pt;  color: #333;  font-weight: bold;} .list-detail .list-tag {  display: flex;  height: 70rpx;} .list-tag .state {  font-size: 9pt;  color: #81aaf7;  width: 120rpx;  border: 1px solid #93b9ff;  border-radius: 2px;  margin: 10rpx 0rpx;  display: flex;  justify-content: center;  align-items: center;} .list-tag .join {  font-size: 11pt;  color: #bbb;  margin-left: 20rpx;  display: flex;  justify-content: center;  align-items: center;} .list-tag .list-num {  font-size: 11pt;  color: #ff6666;} .list-info {  font-size: 9pt;  color: #bbb;  margin-top: 20rpx;}.bottom-line{  display: flex;  height: 60rpx;  justify-content: center;  align-items: center;  background-color: #f3f3f3;}.bottom-line text{  font-size: 9pt;  color: #666;}

效果：

三、个人中心布局

3.1 布局

在个人中心页面中编写 .wxml 文件如 : ucenter/index/index.wxml)进行页面显示

布局

index.wxml:

        Bing    修改                    我主持的会议        5        👍                            我参与的会议        3        👌                        我发布的投票        6        👆                            我参与的投票        8        👇                        信息        👉                            设置        👉    

3.2 样式

在ucenter/index/index.wxss下编写即可

index.wxss:

Page{  background-color: rgba(135, 206, 250, 0.075);}.user{  display: flex;  width: 100%;  align-items:center;  background-color: white;  margin-bottom: 28rpx;}.user-img{height: 170rpx;width: 170rpx;margin: 30rpx;border: 1px solid #cdd7ee;border-radius: 6px;}.user-name{width: 380rpx;margin-left: 20rpx;font-weight: 550;}.user-up{color: rgb(136, 133, 133);}.cells{  background-color: white;}.cell-items{  display: flex;  align-items:center;   height: 110rpx;}.cell-items-title{  width: 290rpx;}.cell-items-icon{  width: 50rpx;  height: 50rpx;  margin: 20rpx;}.cell-items-num{  padding-left: 30rpx;  margin-left: 200rpx;  width: 70rpx;}.cell-items-ion{  margin-left: 295rpx;}

效果：

来源地址：https://blog.csdn.net/m0_73192864/article/details/133902935