会议OA小程序【会议管理，个人中心页面布局】

news2024/12/25 23:09:13

目录

一. 自定义组件介绍

1.1 概念

1.2 创建自定义组件

二. 会议管理页面布局

使用自定义组件

页面布局及样式

三. 个人中心页面布局

一. 自定义组件介绍

1.1 概念

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

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

1.2 创建自定义组件

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

{
  "component": true
}

 同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

代码示例：

<!--components/tabs/tabs.wxml-->
<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>

/* 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;
}

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

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

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

代码示例：

// components/tabs/tabs.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

更多详细内容参见微信小程序自定义组件 

二. 会议管理页面布局

在project.config.json中添加以下代码防止项目出现报错 

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

使用自定义组件

list.json

{
    "usingComponents": {
      "tabs":"/components/tabs/tabs"
    }
}

页面布局及样式

list.wxml

<!--pages/meeting/list/list.wxml-->
<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 {
  font-size: 12pt;
  color: #777;
  line-height: 110%;
  font-weight: bold;
  width: 100%;
  padding: 15rpx;
  background-color: #f3f3f3;
}

.mobi-icon {
  padding: 0rpx 3rpx;
  border-radius: 3rpx;
  background-color: #ff7777;
  position: relative;
  margin-right: 10rpx;
}

/*list*/
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

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

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

效果展示

 

三. 个人中心页面布局

index.wxml

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image class="userInfo-head" src="/static/images/avatar.png"></image>
    <text class="userInfo-login">用户登录</text>
    <text class="userInfo-set">修改</text>
</view>
<view class="cells">
    <view class="cell-items1">
        <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>
    <hr/>
    <view class="cell-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title2">我参与的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items1">
        <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>
    <hr/>
    <view class="cell-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title2">我参与的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items1">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">消        息</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title2">设        置</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>

index.wxss

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.userInfo{
  display: flex;
  height: 300rpx;
  width: 100%;
  background-color: #fff;
  border-bottom: 15px solid lightgray;
}
.userInfo-head{
  height: 250rpx;
  width: 250rpx;
  margin: 20rpx;
}
.userInfo-login{
  width: 400rpx;
  margin:150rpx 20rpx;
}
.userInfo-set{
  /* height: 100rpx; */
  width: 100rpx;
  margin:150rpx 20rpx;
}

.cells{
  background-color: #fff;
  height: 270rpx;
}
.cell-items1,.cell-items2{
  height: 120rpx;
  display: flex;
  /* margin: 30rpx 0 0 0; */
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items2{
  /* height: 120rpx;
  display: flex;
  margin: 20rpx 0 0 0; */
  border-bottom: 15px solid lightgray;
}
.cell-items-icon{
  height: 80rpx;
  width: 80rpx;
  margin: 15rpx;
}
.cell-items-title{
  display: flex;
  font-weight: 700;
  font-size: 15px;
  /* margin: 20rpx 0 0 50rpx; */
  margin-top: 10rpx;
  padding: 15rpx;
}
.cell-items-title2{
  display: flex;
  font-weight: 700;
  font-size: 15px;
  margin-top: 10rpx;
  /* align-items: center; */
  padding: 15rpx;
  /* border-top: 20rpx; */
}
.cell-items-num{
  margin: 20rpx 0 0 300rpx;
}
.cell-items-detail{
  margin: 20rpx 0 0 20rpx;
}
.cells > hr{
  display: block;
  height: 1px;
  background-color: rgba(135, 206, 250, 0.075);
}

效果展示

 

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

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

相关文章

新服务入驻生产环境 CICD 全流程、自动化脚本教程

新服务入驻生产环境 CICD 全流程、自动化脚本教程

文章目录 背景CICD百花齐放 “四部曲”实现优势涉及文件核心流程ci.ymlMakefilepackage.shnoah_control 小结 背景 新服务功能完成测试后&#xff0c;将会进行生产环境的入住&#xff0c;对外提供产品、功能支持。那么如何规范的、安全的、自动化的把本地服务移植到生产环境呢…
阅读更多...
uniapp无感刷新token实现过程

uniapp无感刷新token实现过程

路漫漫其修远兮&#xff0c;前端道路逐渐迷茫&#xff0c;时隔好久好久终于想起了我还有一个小博客&#xff0c;最近在一直在弄uniapp&#xff0c;属实有被恶心到&#xff0c;但也至少会用了&#xff0c;最近实现了一个比较通用的功能&#xff0c;就是无感刷新token&#xff0c…
阅读更多...
如何下载和安装 Linux Red Hat 9.0安装包

如何下载和安装 Linux Red Hat 9.0安装包

【微|信|公|众|号&#xff1a;厦门微思网络】 官网&#xff1a; www.xmws.cn 【限时优惠】RHCE9.0培训考证-红帽官方授权中心-CSDN博客通过这门课程&#xff0c;您将能够更好的理解企业级需求和解决方案&#xff0c;提升您的战略思 维和决策能力并助力您为企业升级使用新的技…
阅读更多...
【C++】引用之带你“消除”C语言版数据结构教材的一些困惑（虽然是C++的内容，但是强烈建议正在学习数据结构的同学点进来看看）

【C++】引用之带你“消除”C语言版数据结构教材的一些困惑（虽然是C++的内容，但是强烈建议正在学习数据结构的同学点进来看看）

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 引用的概念 引用的特性 引用的使用场…
阅读更多...
Django实现音乐网站 ⒇

Django实现音乐网站 ⒇

使用Python Django框架做一个音乐网站&#xff0c; 本篇音乐播放器-添加播放音乐功能实现。 目录 创建播放器数据表 设置表结构 执行创建表 命令 执行 数据表结构 添加单个歌曲 创建路由 加入播放器视图 模板处理 基类方法 子页面调用 优化弹窗 加入layui文件 基…
阅读更多...
DPDK收发包流程分析

DPDK收发包流程分析

一、 前言 DPDK是intel工程师开发的一款用来快速处理数据包的框架，最初的目的是为了证明传统网络数据包处理性能低不是intel处理器导致的，而是传统数据的处理流程导致，后来随着dpdk的开源及其生态的快速发展，dpdk成为了高性能网络数据处理的优秀框架。本篇文章主要介绍DPDK…
阅读更多...
游戏动态库缺失

游戏动态库缺失

缺哪个动态库就搜哪个&#xff0c;再下载下来。 百度网盘&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1TlxLtL3hg_iCCvtCzT7bXw 提取码&#xff1a;8888 文件下载完之后要放到指定的位置 C:\Windows\System32
阅读更多...
怎么在爬虫中使用ip代理服务器，爬虫代理IP的好处有哪些？

怎么在爬虫中使用ip代理服务器，爬虫代理IP的好处有哪些？

随着互联网的快速发展&#xff0c;网络爬虫已经成为数据采集、分析和整理的重要工具。然而&#xff0c;随着网络技术的不断发展&#xff0c;许多网站都会采取反爬虫措施&#xff0c;以避免数据被恶意获取。在这种情况下&#xff0c;代理IP服务器就成为了爬虫们的必本备文工将具…
阅读更多...
Flink学习---15、FlinkCDC（CDC介绍、案例实操）

Flink学习---15、FlinkCDC（CDC介绍、案例实操）

星光下的赶路人star的个人主页 未来总是藏在迷雾中让人胆怯&#xff0c;但当你踏入其中&#xff0c;便会云开雾散 文章目录 1、CDC简介1.1 什么是CDC1.2 CDC的种类1.3 Flink-CDC 2、FlinkCDC案例实操2.1 开启MySQL Binlog并重启MySQL2.2 FlinkSQL方式的应用2.2.1 导入依赖2.2.2…
阅读更多...
jadx的使用

jadx的使用

这篇文章主要介绍下jadx的使用。 1&#xff1a;下载安装 开源地址如下&#xff1a; https://github.com/skylot/jadx 当前最新的版本是1.4.7&#xff1a; https://github.com/skylot/jadx/releases/tag/v1.4.7 2&#xff1a;使用jadx mac/linux 使用jadx-gui.windows使用…
阅读更多...
2023年中国光模块行业研究报告

2023年中国光模块行业研究报告

第一章 行业概况 1.1 行业简介 光模块行业是光纤通信技术发展的重要组成部分&#xff0c;作为连接光纤通信网络的基础设备&#xff0c;光模块为数据传输提供了必要的硬件支持。光模块是光纤通信系统核心器件之一&#xff0c;它包括多种模块类别&#xff0c;例如光接收模块、光…
阅读更多...
Random与random的区别

Random与random的区别

Random与random的区别 前言一、Rondom二、rondom三、使用Rondom的好处 前言 Rondom和raodom都可以表示随机数&#xff0c;下面是详细讲解 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Rondom Rondom是Java中的一个类&#xff0c;若需要生成随机…
阅读更多...
在URP管线中添加ShaderMaterial自定义GUI的方法

在URP管线中添加ShaderMaterial自定义GUI的方法

编写GUI面板 1. 新建GUI子面板 using UnityEngine; using UnityEngine.Rendering;namespace UnityEditor.Rendering.Universal.ShaderGUI {internal class CP_XXXOutLineGUI{public static class Styles{}public struct LitProperties{public LitProperties(MaterialProperty…
阅读更多...
速卖通，国际站测评补单用什么环境，买家账号不会被风控，F号

速卖通，国际站测评补单用什么环境，买家账号不会被风控，F号

我们做自养号测评、补单首先要解决的就是安全性的问题&#xff0c;如果安全性解决的不了的话&#xff0c;其他的都不要再提了。目前我们的成号率可以稳定在9.8成以上&#xff0c;基本上0砍单封号 市面上的环境有&#xff1a; 1.虚拟机V2&#xff1b;三四年前的环境方案了&…
阅读更多...
6. 加载栅格(raster)图层

6. 加载栅格(raster)图层

文章目录 前言加载栅格(raster)图层gdalGeoTiffQGis导入tif代码添加 GeoPackageQGis导入代码导入 wms在线高德影像地图QGis添加在线高德影像代码添加 离线高德影像地图瓦片原理服务描述XML文件QGis导入离线地图代码导入 前言 本章讲述使用qgis c Api加载栅格地图数据并显示。 …
阅读更多...
卡通人像制作就是这么简单

卡通人像制作就是这么简单

1、打开提示词生成器。 Prompt Generatorhttps://remaker.ai/userspace/prompt-generator/2、按下面截图设置。 3、复制英文提示。 4、打开画图链接。 https://poe.com/chat/https://poe.com/chat/ 5、输入提示词&#xff0c;按回车。 female,wide eyes,lipstick,fox ears,b…
阅读更多...
解决一则诡异的javascript函数不执行的问题

解决一则诡异的javascript函数不执行的问题

有个vue 音乐播放器项目&#xff0c;由于之前腾讯的搜索接口没法用了&#xff0c;于是改成了别家的搜索接口。 但是由于返回数据结构不一样&#xff0c;代码重构的工作量还是挺大的&#xff1a;包括数据请求&#xff0c;数据处理&#xff0c;dom渲染&#xff0c;处理逻辑都进行…
阅读更多...
C++算法：二叉树的序列化与反序列化

C++算法：二叉树的序列化与反序列化

#题目 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据。 请设计一个算法来实现二叉树的序列化与反序列化。…
阅读更多...
golang的json转pb验证

golang的json转pb验证

基于这篇文章的最后一个代码进行验证。 https://blog.csdn.net/mijichui2153/article/details/133894403?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22133894403%22%2C%22source%22%3A%22mijichui2153%22%7D 1、准备 &…
阅读更多...
gs_moment

gs_moment

ps:仅共学习&#xff0c;自用。
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023