微信小程序开发的OA会议之会议个人中心的页面搭建及模板，自定义组件的学习

目录

一.自定义组件及会议效果编写

效果显示 

 二.个人中心布局

编写结果

​编辑 

一.自定义组件及会议效果编写

在页面中创建一个以components命名的项目来存放组件

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

 

刚刚创建好会报一个编码错误我们需要在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

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

如下图所示 

 

 

在 tabs.json 中编写:  

{"component": true,"usingComponents": {}
}

在 tabs.wxml 中进行编写模板: 

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}"><view style="margin-bottom:5rpx">{{item}}</view><view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view></view></view><view class="tabs_content"><slot></slot></view>
</view>

在 tabs.js 中进行编写需要功能 : 

// components/tabs/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})}}
})

 在 tabs.wxss 中进行编写样式:

/* components/tabs/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: 400rpx; */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:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;
}.item_active1 {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;border-bottom: 6rpx solid #333;border-radius: 2px;
}

在会议页面.json (meeting/list/list.json)中增加以下设置

 

再 list.js 中进行初始化数据 

// pages/meeting/list/list.js
Page({/*** 页面的初始数据*/data: {tabs:['会议中','已完成','已取消','全部会议'],lists: [{'id': '1','image': '/static/persons/1.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/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/1.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/3.jpg','title': 'H100太空商业大会','num':'500','state':'进行中','time': '10月09日 17:31','address': '大连市'}],lists2: [{'id': '1','image': '/static/persons/1.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': '北京市·朝阳区'}],lists3: [{'id': '1','image': '/static/persons/1.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/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': '北京市·朝阳区'}]},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面显示*/onShow() {},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})}
})

 在 list.wxml中使用  

 

<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img al-center"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state al-center">{{item.state}}</view><view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view></view></view>
</block>

在会议的 list.wxss  中进行编写样式

/* pages/meeting/list/list.wxss */
.mobi-title{background-color: green;padding: 10px;
}
.mobi-icon{border: 1rpx solid red;margin-right: 5px;
}
.mobi-title text{font-weight: 700;color: aqua;
}
.list{display: flex;align-items: center;/* background-color: yellowgreen; */border-bottom: 3px solid yellowgreen;
}
.list-img{
padding: 0 10px;
}
.video-img{height: 80px;width: 80px;
}
.list-detail{}
.list-title{
font-weight: 700;
margin: 3px 0;
}
.list-tag{
display: flex;
align-items: center;
}
.state{
border: 2px solid red;
padding: 3px 6px;
color: red;
margin:0   5px 10px 0;
}
.join{
color: yellowgreen;
}
.list-num{color: aqua;font-weight: 700;
}
.list-info{color: yellowgreen;font-size: 12px;
}

到这里自定义组件将会议的页面搭建以及效果显示完成

效果显示 

 

 二.个人中心布局

在 ucenter/index/index.wxml进行页面显示编写

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user"><image class="user-img"  src="/static/persons/2.jpg"></image><view class="user-name">Fithe.</view><text class="user-up">修改</text>
</view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我主持的会议</text><text class="cell-items-num">1</text><text class="cell-items-detail">✐</text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我参与的会议</text><text class="cell-items-num">10</text><text class="cell-items-detail">✐</text></view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我发布的投票</text><text class="cell-items-num">1</text><text class="cell-items-detail">✐</text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我参与的投票</text><text class="cell-items-num">10</text><text class="cell-items-detail">✐</text></view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/template.png" class="cell-items-icon"></image><text class="cell-items-title">信息</text><text class="cell-items-ion">✐</text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/component.png" class="cell-items-icon"></image><text class="cell-items-title">设置</text><text class="cell-items-ion">✐</text></view>
</view>

在index.wxss中编写样式 

/* pages/ucenter/index/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;
}
编写结果
 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/111406.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

山海鲸可视化B/S架构应用

山海鲸可视化B/S架构应用

一、什么是B/S架构 BS架构&#xff08;Browser-Server架构&#xff09;是一种常见的软件架构模式&#xff0c;其中系统的核心业务逻辑和数据处理都发生在服务器端&#xff08;Server&#xff09;&#xff0c;而客户端&#xff08;Browser&#xff09;主要负责显示和用户交互。…
阅读更多...
使用GH（命令行）在本地提出Github上的issue、PR，合并PR

使用GH（命令行）在本地提出Github上的issue、PR，合并PR

使用GH&#xff08;命令行&#xff09;在本地提出Github上的issue、PR&#xff0c;合并PR 前言 Github上的一些操作使用Git命令是无法完成的&#xff0c;因此正常流程就是在网页端进行。等一下&#xff0c;你让程序员用网页进行&#xff1f;果然&#xff0c;有命令行工具可以…
阅读更多...
客户端post请求，服务器收到{}数据解决方法

客户端post请求，服务器收到{}数据解决方法

当我们发起登录请求时&#xff0c;后台接收到的为{}数据 原因&#xff1a;传送过去的对象格式不对 解决方案&#xff1a; 引入qs npm install qs 在data中格式化数据 const res await axios({url:http://127.0.0.1:3000/post,method:post,data:Qs.stringify({username:te…
阅读更多...
R语言时间序列分析

R语言时间序列分析

目录 概述 1、什么是时间序列分析 2、时间序列分析的应用 时间序列的基本操作
阅读更多...
手机启用adb无线调试

手机启用adb无线调试

具体步骤 手机和电脑处于同一个路由器下。 比如手机IP是192.168.31.181&#xff0c;电脑能ping通。 手机端启用无线adb调试先把手机用USB线连接电脑&#xff0c;打开adb&#xff0c;输入以下命令&#xff1a; G:\> adb tcpip 5555 restarting in TCP mode port: 5555 无…
阅读更多...
阿里云服务器x86计算架构ECS规格大全

阿里云服务器x86计算架构ECS规格大全

阿里云企业级服务器基于X86架构的实例规格&#xff0c;每一个vCPU都对应一个处理器核心的超线程&#xff0c;基于ARM架构的实例规格&#xff0c;每一个vCPU都对应一个处理器的物理核心&#xff0c;具有性能稳定且资源独享的特点。阿里云服务器网aliyunfuwuqi.com分享阿里云企业…
阅读更多...
【高等数学】导数与微分

【高等数学】导数与微分

文章目录 1、导数的概念1.1、引例1.1.1、变速直线运动瞬时速度1.1.2、曲线的切线 1.2、导数的定义1.3、证明常用导数1.4、导数的几何意义1.5、可导与连续的关系 2、函数的求导法则2.1、函数的和、差、积、商的求导法则2.2、反函数的求导法则2.3、复合函数的求导法则2.4、基本初…
阅读更多...
github: kex_exchange_identification: Connection closed by remote host

github: kex_exchange_identification: Connection closed by remote host

问题描述 (base) ➜ test git:(dev) git pull kex_exchange_identification: Connection closed by remote host Connection closed by 192.30.255.113 port 22 致命错误&#xff1a;无法读取远程仓库。解决方案 参照下边文档 https://docs.github.com/en/authentication/tr…
阅读更多...
基于SSM的工资管理系统

基于SSM的工资管理系统

基于SSM的工资管理系统 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 管理员界面 通知公告 考勤管理 工资管理 请假管理 摘要 基于SSM&#xff08;Spring、S…
阅读更多...
【每日一题】根据规则将箱子分类

【每日一题】根据规则将箱子分类

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;分类讨论 其他语言cpython3 写在最后 Tag 【分类讨论】【2023-10-20】 题目来源 2525. 根据规则将箱子分类 题目解读 题目意思明确&#xff0c;根据条件判断箱子的类别。 解题思路 方法一&#xff1a;分类讨论 根据…
阅读更多...
【小白专用】安装Apache2.4+ 安装PHP8.2+ php与sql server 2008 r2连接测试教程

【小白专用】安装Apache2.4+ 安装PHP8.2+ php与sql server 2008 r2连接测试教程

PHP安装 1、PHP下载 PHP For Windows: Binaries and sources Releases 注意&#xff1a; 1.要下载Thread Safe&#xff0c;否则没有php7apache2_4.dll这个文件 2.如果是64位系统要下载x64的&#xff0c;x86的不行 3.下载Zip 2、PHP解压安装 将Zip进行解压&#xff0c;里…
阅读更多...
JavaScript ES6类的定义与继承

JavaScript ES6类的定义与继承

文章目录 一、class方式定义类1.认识class定义类2.类和构造函数的异同3.类的构造函数4.类的实例方法5.类的访问器方法6.类的静态方法 二、继承1.extends实现继承2.super关键字3.继承内置类4.类的混入mixin 三、ES6转ES51.class转换2.extends转换 四、多态 一、class方式定义类 …
阅读更多...
docker全家桶（基本命令、dockerhub、docker-compose）

docker全家桶（基本命令、dockerhub、docker-compose）

概念 应用场景&#xff1a; Web 应用的自动化打包和发布。自动化测试和持续集成、发布。在服务型环境中部署和调整数据库或其他的后台应用。从头编译或者扩展现有的 OpenShift 或 Cloud Foundry 平台来搭建自己的 PaaS 环境。 作用&#xff1a;Docker 使您能够将应用程序与基…
阅读更多...
2023年信息院学生科协第二次硬件培训

2023年信息院学生科协第二次硬件培训

2023年信息院学生科协第二次硬件培训 前言一、51单片机简介1、什么是单片机2、主流单片机及其编程语言3、单片机的应用4、单片机开发软件 二、GPIO&#xff08;点亮LED&#xff09;1、GPIO简介2、LED简介3、硬件设计4、软件设计 三、GPIO&#xff08;独立按键&#xff09;1、按…
阅读更多...
2023.10(u盘刻录iso)主机，vmware，virtualbox安装linux/ubuntu/kali/centos stream9/arch

2023.10(u盘刻录iso)主机，vmware，virtualbox安装linux/ubuntu/kali/centos stream9/arch

download 1 kali官网 2 ubuntu官网 3vmware workstation pro(最新版17pro) 4 virtualbox for linux sudo apt install virtualbox-ext-pack 5 win32 disk imger linux dd 刻录iso到u盘 #查看U盘路径 fdisk -l #图形界面 以kali为例会在桌面出现挂载图标 点开之后输入pwd寻…
阅读更多...
CVPR 2018 基于累积注意力的视觉定位 Visual Grounding via Accumulated Attention 详解

CVPR 2018 基于累积注意力的视觉定位 Visual Grounding via Accumulated Attention 详解

Abstract&#xff1a; VG面临的主要挑战有3个&#xff1a;1 )查询的主要焦点是什么&#xff1b;2 )如何理解图像&#xff1b;3 )如何定位物体。 在本文中&#xff0c;我们将这些挑战形式化为三个注意力问题&#xff0c;并提出了一个累积注意力( A-ATT )机制来共同推理其中的挑战…
阅读更多...
python一点通：coroutine (协程）是什么和重要知识点？

python一点通：coroutine (协程）是什么和重要知识点？

协程已经成为Python用于编写并发和异步代码的重要工具之一。在这篇博客文章中&#xff0c;我们将深入探讨协程是什么&#xff0c;它们的优点&#xff0c;以及它们与传统的线程和进程有何不同。 什么是协程&#xff1f; 协程是用于合作式多任务处理的子程序&#xff08;或函数…
阅读更多...
【微信小程序】6天精准入门（第3天：小程序flex布局、轮播图组件及mock运用以及综合案例）附源码

【微信小程序】6天精准入门（第3天：小程序flex布局、轮播图组件及mock运用以及综合案例）附源码

一、flex布局 布局的传统解决方案&#xff0c;基于[盒状模型]&#xff0c;依赖display属性 position属性 float属性 1、什么是flex布局&#xff1f; Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性。任何一个容器都可以…
阅读更多...
智能变电站自动化系统的应用与产品选型

智能变电站自动化系统的应用与产品选型

摘要&#xff1a;现如今&#xff0c;智能变电站发展已经成为了电力系统发展过程中的内容&#xff0c;如何提高智能变电站的运行效率也成为电力系统发展的一个重要目标&#xff0c;为了能够更好地促进电力系统安全稳定运行&#xff0c;本文则就智能变电站自动化系统的实现进行了…
阅读更多...
如何消除CSDN博文代码中自动添加的行号

如何消除CSDN博文代码中自动添加的行号

哪里有自定义目录标题 编写CSDN博文&#xff0c;使用代码块的linux命令行&#xff0c;预览时没有代码行号&#xff0c;但发布文章后自动添加了行号。 git clone https://github.com/mikel-brostrom/yolo_tracking.git cd yolo_tracking pip install -v -e .为什么预览和发布的…
阅读更多...
最新文章

Copyright @ 2022~2023