小程序-会议OA项目-首页

news2024/10/2 12:17:17

目录

一，flex弹性布局

什么是flex布局？

flex属性

flex-direction属性

        学习地址：

 OA项目搭建以及flex布局演示

二，轮播图--组件的使用

1.先去官方文档中查看轮播图组件如何使

 2.在开发工具中查看演示及修改代码

3. 使用mockjs存储数据

 4.新建一个config目录用作访问后台接口

5.启用Mock

 6.编写调用数据的接口的方法

 轮播图完成

三.OA首页的布局

一，flex弹性布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性

什么是flex布局？

  1. Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

  2. 任何一个容器都可以指定为Flex布局。

  3. display: ‘flex’

            

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex属性

  • flex-direction 主轴的方向 默认为row

  • flex-wrap 如果一条轴线排不下，如何换行

  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式

  • justify-content 定义了项目在主轴上的对齐方式

  • align-items 定义项目在交叉轴上如何对齐

  • align-content 属性定义了多根轴线的对齐方式

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

学习地址：

Flex 布局语法教程 | 菜鸟教程

 OA项目搭建以及flex布局演示

 1.新建项目 搭建框架

​

 2.新增一个static文件 

​

3.以及新增四个tab页  首页 会议 投票 设置

若static文件放置位置出错会出现找不到的情况

app.json

"pages": [
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index"
  ],

"tabBar": {

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "/static/tabBar/coding.png",

        "selectedIconPath": "/static/tabBar/coding-active.png"

      },

      {

        "pagePath": "pages/meeting/list/list",

        "iconPath": "/static/tabBar/sdk.png",

        "selectedIconPath": "/static/tabBar/sdk-active.png",

        "text": "会议"

      },

      {

        "pagePath": "pages/vote/list/list",

        "iconPath": "/static/tabBar/template.png",

        "selectedIconPath": "/static/tabBar/template-active.png",

        "text": "投票"

      },

      {

        "pagePath": "pages/ucenter/index/index",

        "iconPath": "/static/tabBar/component.png",

        "selectedIconPath": "/static/tabBar/component-active.png",

        "text": "设置"

      }

    ]

  },

效果：

​

4.会议排版

4.1 查看普通排版的样式

<view class="box">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
</view>

​

4.2 添加样式

将box盒状布局宽高都设为750rpx

将与div同样类型的12个块级元素view宽高都设为100（span为行内元素）

一共为12个 也就是现在高为1200

.box{
  height:750rpx ;
  width: 750rpx;
  background-color: aquamarine;
}
view{
  height: 100rpx;
  width: 100rpx;
  border:1px solid red;
}

​

 4.3 添加flex弹性布局后

发生了弹性的变化 原本1200rpx横着不可能装在750rpx的宽度里 现在实现了

也就是说现在不会因为屏幕布局变小而产生界面失分的影响

display：flex；

​

 也可以在排列时添加一些属性 达到花式排列的效果 详情请查阅官方文档

菜鸟教程 - 学的不仅是技术，更是梦想！

二，轮播图--组件的使用

1.先去官方文档中查看轮播图组件如何使

swiper | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

 2.在开发工具中查看演示及修改代码

 修改为自己需要的样子

index.wxml

<view>
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
        <block wx:for="{{imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{{item.img}}" class="swiper-item" />
                </view>
            </swiper-item>
        </block>
    </swiper>
</view>

 index.css

.swiper-item {
    height: 300rpx;
    width: 100%;
    border-radius: 10rpx;
}

 index.js

 const api = require("../../config/api")
 
 loadSwiperImgs(){
    let that=this;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }

3. 使用mockjs存储数据

 在index.js中定义数据

  data: {

    imgSrcs:[] //需要调用 http://localhost：8080/demo/wx/swiperImgs 接口地址拿数据

  },

 4.新建一个config目录用作访问后台接口

config/app.js 

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/demo/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
   SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
   MettingInfos: WxApiRoot+'meeting/list', //会议信息
 };

5.启用Mock

​

 JSON数据包

当访问此接口并与数据包绑定的时候响应数据

 http://localhost:8080/demo/wx/swiperImgs 

{
  "data": {
    "images":[
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    "text": "1"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
    "text": "2"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
    "text": "3"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
    "text": "4"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
    "text": "5"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
    "text": "6"
  }
]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

 6.编写调用数据的接口的方法

pages/index.index.js

编写后编译报错请检查config/app目录的地址

const api = require("../../config/app")



/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.loadSwiperImgs();
  },



 loadSwiperImgs(){
    let that=this;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }

增加样式

pages/index.index.wxss

/* pages/index/index.wxss */
page{
	height: 100%;
	background-color: #efeff4;
}
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}

 轮播图完成

三.OA首页的布局

目标： 

                               ​

 先在index/index.js中定死了所需要的数据

后期我们再对其进行与数据库交互

lists:[
      {
        "id": "1",
        "image": "/static/persons/1.jpg",
        "title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】",
        "num":"304",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "深圳市·南山区"
      },
      {
        "id": "1",
        "image": "/static/persons/2.jpg",
        "title": "AI WORLD 2016世界人工智能大会",
        "num":"380",
        "state":"已结束",
        "starttime": "2022-03-15 00:00:00",
        "location": "北京市·朝阳区"
      },
      {
        "id": "1",
        "image": "/static/persons/3.jpg",
        "title": "H100太空商业大会",
        "num":"500",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "大连市"
      },
      {
        "id": "1",
        "image": "/static/persons/4.jpg",
        "title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
        "num":"150",
        "state":"已结束",
        "starttime": "2022-03-13 00:00:00",
        "location": "北京市·朝阳区"
      },
      {
        "id": "1",
        "image": "/static/persons/5.jpg",
        "title": "新质生活 · 品质时代 2016消费升级创新大会",
        "num":"217",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "北京市·朝阳区"
      }
    ]

按如下编写前端样式即可：

<view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>会议信息</text>
</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">
            <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">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

 目前已经编写成如下样式了 继续改进

                                      

 会议信息字体样式

.mobi-title{
  font-size: 15px;
  margin: 10rpx;
}
.mobi-icon{
  background-color: red;
  padding: 3rpx;
}
.mobi-title text{
  margin-left: 10rpx;
}

 头像样式

.list{
  background-color: #fff;
  display: flex;
  margin:10rpx;
  padding: 10rpx;
}
.list-img,.video-img{
  height: 150rpx;
  width: 150rpx;
}
.list-img{
  margin:20rpx 0 0 0;
}

注意机型

 右侧字体样式调整

.list-detail{
  margin:0 0 0 15rpx;
}
.list-title{
  font-weight: 700;
}
.list-tag{
  display: flex;
  margin:10px 0;
}
.state{
  border: 2px solid lightskyblue;
  padding: 2px;
  color: lightskyblue;
}
.join{
  border: 2px solid #fff;
  padding: 2px;
  margin:0 0 0 20rpx;
  color: gray;
}
.list-num{
  color: red;
}
.list-info{
  color: gray;
}
.bottom-line{
  text-align: center;
  margin-bottom: 10px;
}

 目标就这样实现啦！！！ 咱们下期见 《编写其他页面》

                       

 

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

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

相关文章

异步通信技术AJAX | 基于JSON、XML的数据交换

异步通信技术AJAX | 基于JSON、XML的数据交换

目录 一&#xff1a;快速搞定AJAX&#xff08;第二篇&#xff09; 1、JS中如何创建和访问JSON对象 2、基于JSON的数据交换&#xff08;重点&#xff09; 3、基于XML的数据交换&#xff08;了解&#xff09; 一&#xff1a;快速搞定AJAX&#xff08;第二篇&#xff09; 1、…
阅读更多...
-source1.5中不支持diamond运算符解决办法

-source1.5中不支持diamond运算符解决办法

写了几年代码了&#xff0c; 回到最初了遇到了bug了&#xff0c;没有仔细思考&#xff0c;以为很容易&#xff0c;起始走到了误区&#xff0c;有种打了一辈子鹰&#xff0c;最后被麻雀啄了眼 de 感觉 首先来看一下我们的错误信息&#xff0c;如下&#xff1a; [ERROR] Failed…
阅读更多...
相机标定笔记(2) -- 标定实践

相机标定笔记(2) -- 标定实践

标定板 为什么需要标定板? 相机标定的第一篇笔记中提到了相机标定所使用的模型&#xff0c;标定算法中我们需要一些可靠的样本点&#xff0c;这些样本点由世界坐标系中的3D点和其在图像上的2D像点组成。用这些2D和3D点对来求解标定参数。为了构建更高精度的3D和2D点&#xff0…
阅读更多...
对于系统架构来说，要么进化，要么死亡

对于系统架构来说，要么进化，要么死亡

在亚马逊云科技年度re:Invent&#xff0c;亚马逊首席技术官Dr. Werner Vogels的主题演讲历来涵盖大量科学和技术领域&#xff0c;今年的演讲也不例外&#xff0c;座无虚席。现在&#xff0c;亚马逊云科技 2022 re:Invent 中国区 recap 正式也开始了&#xff0c;欢迎大家积极参与…
阅读更多...
单例模式之饿汉模式懒汉模式

单例模式之饿汉模式懒汉模式

前言 单例模式能保证某个类在程序中只存在唯一一份实例&#xff0c;而不会创建出多个实例&#xff0c;比如 JDBC 中的 DataSource 实例就只需要一个。单例模式具体的实现方式有"饿汉" 和 "懒汉" 两种。 1.饿汉模式&#xff08;类加载的同时创建实例&…
阅读更多...
SOLIDWORKS装配体如何快速导出BOM丨慧德敏学

SOLIDWORKS装配体如何快速导出BOM丨慧德敏学

BOM作为产品数据的组成部分&#xff0c;它的重要性不言而喻。采购需要BOM、成本核算需要BOM、领料加工和装配需要BOM、录入ERP需要BOM……可以说&#xff0c;BOM与图纸同样重要&#xff0c;有些产品&#xff0c;可以没有图纸&#xff0c;但是不能没有BOM。借助SOLIDWORKS BOM插…
阅读更多...
带你打开C语言的大门

带你打开C语言的大门

最近有刚开始学习编程的同学问我&#xff1a;“C语言是什么&#xff1f;C语言是怎么来的&#xff1f;C语言用来干什么&#xff1f;”。对&#xff0c;在学习C语言之前&#xff0c;首先了解C语言的发展例程&#xff0c;这应该是每一个刚刚开始学习C语言的人应该了解的&#xff0…
阅读更多...
什么是＂文件表项＂

什么是＂文件表项＂

从Linux的层次角度来说&#xff0c;在用户空间是存在这样的概念的&#xff0c;这个概念是存在内核空间的&#xff0c;而且是针对打开的文件的&#xff01; 内核用三种数据结构来描述一个打开的文件。 数据结构一: 文件描述符表(descriptor table): 每个进程都有它独立的描述符表…
阅读更多...
【代码调试】《FSCE: Few-Shot Object Detection via Contrastive Proposal Encoding》

【代码调试】《FSCE: Few-Shot Object Detection via Contrastive Proposal Encoding》

论文地址&#xff1a;https://arxiv.org/pdf/2103.05950.pdf 代码地址&#xff1a;https://github.com/megvii-research/FSCE 论文阅读&#xff1a;https://blog.csdn.net/qiankendeNMY/article/details/128390284 我的配置&#xff1a; Python &#xff1a;3.8(ubuntu18.04) …
阅读更多...
小程序发布体验版流程

小程序发布体验版流程

一、微信开发者工具操作 1. 点击 工具 -> 上传&#xff08;或 直接点击右上角“上传”按钮&#xff09; 【注意】 如果使用的测试 appid 则【上传】按钮不能点击&#xff0c;必须使用真实 appid 2. 如果之前有发布过体验版&#xff0c;会提示继续操作将会覆盖之前的体验版…
阅读更多...
MyBatisPlus ---- 基本CRUD

MyBatisPlus ---- 基本CRUD

MyBatisPlus ---- 基本CRUD1. BaseMapper2. 插入3. 删除a>通过id删除记录b>通过id批量删除记录c>通过map条件删除记录4. 修改5. 查询a>根据id查询用户信息b>根据多个id查询多个用户信息c>通过map条件查询用户信息d>查询所有数据6. 通用Servicea>IServi…
阅读更多...
RK3588平台开发系列讲解（Display篇）开机视频的设置

RK3588平台开发系列讲解（Display篇）开机视频的设置

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、开机视频功能介绍二、使用方法2.1、开启与关闭2.2、视频放置位置2.3、编译结果2.4、视频素材要求2.5、参数控制说明沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍RK3588平台开机视频的使用方法…
阅读更多...
ARM64内存虚拟化分析（7）stage2异常处理

ARM64内存虚拟化分析（7）stage2异常处理

当虚拟机访问内存或虚拟机访问寄存器时&#xff0c;由于并没有分配真实的物理地址&#xff0c;并没有建立stage2映射&#xff0c;因此这两种情况会产生stage2异常处理&#xff0c;其中第一种情况为真实的stage2缺页&#xff0c;第二种情况为MMIO处理。同时如果在stage2产生外部…
阅读更多...
零膨胀负二项回归案例分析

零膨胀负二项回归案例分析

零膨胀负二项回归分析 计数研究模型中&#xff0c;常用泊松回归模型&#xff0c;但泊松回归模型理论上是要求平均值与标准差相等&#xff0c;如果不满足&#xff0c;则可使用负二项回归模型&#xff0c;负二项回归放宽了平均值标准差这一理论假定。 在实际研究中&#xff0c;…
阅读更多...
网络协议类型

网络协议类型

网络协议是一组规则、约定和数据结构&#xff0c;用于规定设备如何跨网络交换数据。换句话说&#xff0c;网络协议可以等同于两个设备必须理解的语言&#xff0c;以实现信息的无缝通信&#xff0c;无论其基础设施和设计差异如何。 OSI 模型&#xff1a;网络协议的工作原理 要…
阅读更多...
Oracle数据库安装配置详细教程汇总（含11g、12c、18c、19c、21c）

Oracle数据库安装配置详细教程汇总（含11g、12c、18c、19c、21c）

不论你是数据库小白&#xff0c;还是久经沙场的技术专家&#xff0c;你接触和运维Oracle数据库的第一步可能都是安装配置。并且随着软硬件的升级、替换以及业务场景的变化&#xff0c;数据库安装也将是你常常会进行的操作之一。 这里先为大家附上Oracle各版本支持的生命周期及…
阅读更多...
阶段性回顾（2）

阶段性回顾（2）

1. 移位操作符的对象只能是整数&#xff0c;只能对整数的二进制位进行移动。 2. 二进制是数值的一种表示形式。一个整数占了四个字节&#xff0c;相当于一个整数可以用32位二进制位序列表示&#xff0c;那么这时候该如何判断正负呢?规定&#xff1a;这32位二进制序列的头一位如…
阅读更多...
第二十二讲：神州路由器OSPF单区域路由的配置

第二十二讲：神州路由器OSPF单区域路由的配置

实验拓扑图如下所示 设备 端口 IP 子网掩码 网关 Router-A F0/0 172.16.1.1 255.255.255.0 无 F0/3 172.16.0.1 255.255.255.0 无 Router-B F0/0 172.16.1.2 255.255.255.0 无 F0/3 172.16.2.1 255.255.255.0 无 PC1 172.16.0.2 255.255.255.0 172.1…
阅读更多...
解决docker容器因报错无法启动的问题，检查、修复容器错误并重启

解决docker容器因报错无法启动的问题，检查、修复容器错误并重启

问题复现 使用&#xff1a; sudo docker ps -a查看当前的docker容器&#xff1a; 我们想启动name为【docker-mongo】的这个容器&#xff0c;因此要执行 sudo docker start docker-mongo但是执行后仍旧没有重启&#xff0c;大概率是重启的时候报错了&#xff0c;查看日志&a…
阅读更多...
Spring Boot骚操作-多数据源Service层封装

Spring Boot骚操作-多数据源Service层封装

mysql, es, mongodb 三个数据源用配置文件方式连接&#xff0c;JPA只是正对dao做了封装&#xff0c;本文主要介绍如何对service层进行封装。 Spring Boot - 多个数据源Service层封装 类关系图 封装的一些配置 application.yml pom.xml 封装后使用 MySQL 动态数据访问 Mong…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023