小程序:会议OA项目-其它页面

news2024/11/24 5:18:37

目录

一、tabs组件及会议管理布局

自定义tabs组件

跟着官网来感受一下

 会议管理的布局

二、个人中心布局


一、tabs组件及会议管理布局

自定义tabs组件

文档参考:自定义组件 | 微信开放文档

跟着官网来感受一下

 先建一个文件夹名为components,里面再建一个tabs的文件

 添加样式等

 tabs.wxml

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<!-- 这是自定义组件的内部 WXML 结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

tabs.wxss

/* components/tabs/tabs.wxss */
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

 tabs.js

// components/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 这里定义了 innerText 属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

 在要用到的页面

 效果图:

 改变内容

 会议管理的布局

tabs.wxml

<!--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>

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

tabs.js

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

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.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': '北京市·朝阳区'
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

首页和会议同用一个布局

.mobi-title{
  line-height: 120%;
  margin: 10rpx;
  /* margin-top: -50px; */
}
.mobi-icon{
  padding: 0 3rpx;
  background-color: #ff7777;
}
.list{
  display: flex;
  margin: 20rpx 0;
  background-color:#ffffff;
}
.list-img,.video-img{
  height: 120rpx;
  width: 120rpx;
}
.video-img{
 margin:20px 10rpx;
}
.list-detail{
  /* border: 2px solid red; */
  height: 220rpx;
  width: 600rpx;
  margin: 5rpx 20rpx;
}
.list-title{
  font-weight: 700;
}
.list-tag{
  display: flex;
  margin: 10rpx 0;
}
.state,.join{
  border: 1px solid rgb(160, 216, 235);
  padding: 10rpx;
}
.list-num{
  color: red;
}
.bottom-line{
  text-align: center;
  margin-bottom: 10px;
}

将index.wxss的中以上代码移动至app.wxss中去

效果图:

 下一步就是实现页面的切换(没有后台接口的情况下)

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
//切换的方法
  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>
    <image class="userInfo-set" src="/static/tabBar/component.png"></image>
</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>
    <hr/>
    <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>
<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>
    <hr/>
    <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>
<view class="cells">
    <view class="cell-items">
        <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-items">
        <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>
</view>

 index.wxss

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

.cells{
    background-color: #fff;
    height: 270rpx;
}
.cell-items{
    height: 120rpx;
    display: flex;
    margin: 30rpx 0 0 0;
    /* border-bottom: 1px solid lightskyblue; */
}
.cell-items-icon{
    height: 100rpx;
    width: 100rpx;
}
.cell-items-title{
    font-weight: 700;
    font-size: 18px;
    margin: 20rpx 0 0 50rpx;
}
.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/154546.html

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

相关文章

【C语言进阶(NEW)】六、文件操作(一)|文件|文件的打开和关闭|文件的顺序读写|文件读取结束的判定

目录 一、文件 1.1 什么是文件 1.1.1 程序文件 1.1.2 数据文件 1.2 为什么使用文件 1.3 文件名 二、文件的打开和关闭 2.1 文件指针 2.2 文件的打开和关闭 三、文件的顺序读写 3.1 fgetc 和 fputc&#xff08;字符输入输出函数&#xff09; 3.2 fgets 和 fputs&am…

20行原生JS代码手写ElementUI表格组件

又是许久没有写博客了&#xff0c;这几年的疫情&#xff0c;总是居家&#xff0c;时间久了&#xff0c;慢慢的总会想很多。现在越发觉得想做的事情一定要尽早去做&#xff0c;不然总说等下一次&#xff0c;很多时候&#xff0c;就没有下一次了。 今天给大家分享一下如何用原生…

从0到1完成一个Vue后台管理项目(十七、使用Echarts:柱状图、折线图)

往期 从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;二、使用element-ui&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;三、使用SCSS/LESS&#xff0c;安装图标库&#xff09; 从0到1完成一个Vu…

DB性能跟不上,加缓存就够了?

服务端软件开发时&#xff0c;通常会把数据存储在DB。而服务端系统遇到的第一个性能瓶颈&#xff0c;往往发生在访问DB时。 这时大部分开发会拿出“缓存”&#xff0c;通过使用Redis在DB前提供一层缓存数据&#xff0c;缓解DB压力&#xff0c;提升服务端性能。 在数据库前添加…

nohup后台运行,进程查看与终止(ubuntu)

1.nohup用途&#xff1a;不挂断地运行命令。语法&#xff1a;nohup Command [ Arg … ] [ & ]无论是否将 nohup 命令的输出重定向到终端&#xff0c;输出都将附加到当前目录的 nohup.out 文件中。如果当前目录的 nohup.out 文件不可写&#xff0c;输出重定向到 $HOME/nohu…

threejs 学习一

前提 threejs官网&#xff1a;https://threejs.org/ 由于官网访问慢&#xff0c;可以github下载压缩包解压后本地启动 github地址&#xff1a;https://github.com/mrdoob/three.js/ 下载好后解压 安装依赖 npm install 启动&#xff1a;npm start 目录介绍&#xff1a; …

语音识别技术简叙述

语音识别技术简述 语音识别的概念 语音识别技术都是让智能设备能够听懂人类语言&#xff0c;其实一门涉及数学信号处理、人工智能、语言学、数理统计学、声学、情感学及心理学等多学科交叉的学科。这项技术可以提供比如自动客服、自动语音翻译、命令控制&#xff0c;语音验证…

【vue】关于vue2和vue3响应式原理的区别

我们都知道&#xff0c;在Vue2中的数据响应式原理存在许多缺陷。 例如无法对新增和直接删除的数据做到响应式&#xff0c;无法直接操作数组进行响应式处理等等。 而在Vue3中&#xff0c;作者很好的解决了这些缺陷&#xff0c;让我们来对比一下Vue2与Vue3对数据响应式处理的具体…

前端如何保证设置的font-family成功生效?

背景 最近开发的一个新页面&#xff0c;在产品验收的时候跟我反馈说页面里的字体跟设计稿中的字体不一样&#xff1b; 问题的关键是我明明记得我有单独设置过 font-family属性&#xff0c;于是我通过Chorme浏览器的调试工具查看了一下DOM的生效样式&#xff1b; 明明是已经设…

IDEA、TortoiseSVN,TortoiseGit提交忽略文件或文件夹

使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件&#xff1a; 1、IDEA 1、idea设置<<--File Types<<--ignore files and folders 原有的过滤条件&#xff1a;*.hprof;*.pyc;*.pyo;*.rbc;*.yarb;*~;.DS_Store…

yolov3-tiny的darknet权重转onnx

前言 之前一直鸽了yolov3-tiny的onnx模型修复&#xff0c;今天终于把最后一个bug解决了&#xff0c;如果想直接享受成果的&#xff0c;直接点我的github仓库下载&#xff0c;使用说明都写了&#xff0c;这篇文章呢主要是给大家分享一下思路和过程&#xff0c;希望能够启发更多…

初识Linux

文章目录初识Linux操作系统概述硬件和软件操作系统常见操作系统总结初识LinuxLinux的诞生Linux内核Linux发行版总结虚拟机介绍虚拟机总结远程连接Linux系统图形化、命令行使用命令行学习Linux系统远程连接工具总结初识Linux 操作系统概述 硬件和软件 我们所熟知的计算机是由…

领域驱动设计:微服务设计为什么要选择DDD?

我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;我经常看到项目团队为微服务到底应该拆多小而争得面红耳赤。不同的人会根据自己对微服务的理解而拆分出不同的微服务&#xff0c;于是大家各执一词&#xff0c;谁也说服不了谁&#xff0c;都觉得…

Day855.生产者-消费者模式 -Java 并发编程实战

生产者-消费者模式 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于生产者-消费者模式的内容。 Worker Thread 模式类比的是工厂里车间工人的工作模式。 但其实在现实世界&#xff0c;工厂里还有一种流水线的工作模式&#xff0c;类比到编程领域&#xff0c;就是生…

RoboMaster EP 实用功能开发(三): 基于树莓派的ROS2机器人系统搭建

功能&#xff1a;在树莓派4b上安装ros2系统&#xff0c;引入robomaster sdk&#xff0c;搭建一个基于ROS2的机器人系统&#xff0c;用于ROS系统的学习、开发和实践。 硬件&#xff1a;RobotMaster EP、树莓派4b 系统平台&#xff1a;Ubuntu 20.04、ROS2&#xff08;Foxy&…

Selenium【Selenium环境搭建与Junit5】

Selenium【Selenium环境搭建与Junit5】&#x1f34e;一. 自行下载谷歌浏览器或者火狐浏览器&#x1f352;1.1 安装好之后需要去掉谷歌(火狐)浏览器自动更新(建议)&#x1f352;1.2下载谷歌(火狐)驱动&#x1f34e;二.Selenium下载与配置&#x1f352;2.1Selenium下载&#x1f3…

服务案例|SQL Server数据库监控反复重启问题

监控平台对主流数据库的监控&#xff0c;能够及时发现异常&#xff0c;快速响应&#xff0c;保障业务系统的稳定。平台通过对SQL Server数据库监控&#xff0c;帮助用户在数据库出现异常时事件处理。 SQL Server数据库监控内容如下 1 、数据库服务器基本性能监控。包括&#…

Hive/MaxCompute SQL性能优化(三):数据倾斜优化实战

SQL性能优化系列&#xff1a;Hive/MaxCompute SQL性能优化(一)&#xff1a;什么是数据倾斜Hive/MaxCompute SQL性能优化(二)&#xff1a;如何定位数据倾斜前面介绍了如何定位数据倾斜&#xff0c;本文介绍如果遇到各种数据倾斜的情况该怎样优化代码。Map长尾优化一、Map读取数据…

ArcGIS如何将Excel表格转换为SHP格式

概述数据的获取渠道是多种多样的&#xff0c;获取的数据格式也是多种多样&#xff0c;作为一名GISer&#xff0c;需要熟练掌握各种格式的数据之间的转换&#xff0c;例如本文要介绍的Excel格式的数据&#xff0c;经常会遇到&#xff0c;这里为大家介绍一下转换方法&#xff0c;…

区块链基础知识(二)

密码学与安全技术 参考书籍 《区块链原理、设计与应用》 Hash算法 加解密算法 混合加密机制 离散对数与Diffie-Hellman秘钥交换协议 消息认证码 数字签名 PKI体系 PKI基本组件 证书签发 证书的撤销 Merkle tree结构 默克尔树逐层记录哈希值的特点&#xff0c;让它具有了一些独特…