微信小程序：会议OA项目-首页

news2024/11/16 10:54:47

目录

一、flex布局

Flex布局简介

什么是flex布局？

flex属性

flex的属性

二、轮播图组件及mockjs的使用

三、会议OA小程序首页布局

一、flex布局

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 布局语法教程 | 菜鸟教程

准备工作：打开我们的微信开发工具

新建一个小程序项目

目标

 搭建框架

 将static的文件夹放入小程序项目中

 以下是static中的内容

 

 构建我们的界面

 此时的app.json

{
  "pages": [
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "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": "设置"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

编译之后

yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

体会一下什么是flex布局

编辑list.wxml和list.wxss

 list.wxml

<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<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>

list.wxss(使用了flex的代码)

/* pages/meeting/list/list.wxss */
.box{
  height: 750rpx;
  width: 750rpx;
  background-color: aquamarine;
  display: flex;
}
view{
  height: 100rpx;
  width: 100rpx;
  border: 1px solid pink;
}

未使用flex布局的效果图

 使用的效果图

 结论：使用flex布局（弹性布局）后，不会因为屏幕变小而导致效果失真

flex的属性

 

 

 

 想要了解更多，大家可以去看提供的学习地址

二、轮播图组件及mockjs的使用

体验以下轮播图组件的使用

通过开发文档找到该组件

 点击在开发者工具中预览效果

 

 效果图

 会自动播放

 找到我们所需要的功能代码复制到小程序项目中去，然后根据项目对代码进行修改

index.wxml

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<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>

在没有后台的情况下会使用mockjs来造数据

mockjs的使用

新建一个config的文件夹，里面新建一个app.js的文件

 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', //会议信息
 };

index.js

// pages/index/index.js
const api = require("../../config/app")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgSrcs:[]//需要调用http://localhost:8080/demo/wx/swiperImgs接口地址拿数据
  },

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  //加载图片
  loadSwiperImgs(){
    let that=this;
     // http://localhost:8080/demo/wx/swiperImgs
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }
})

 效果图：

三、会议OA小程序首页布局

调整一下样式

index.wxss

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

在没有后台的情况下我们之前是使用mock工具 提供的图片，现在我们将数据固定

index.js

// pages/index/index.js
const api = require("../../config/app")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgSrcs:[],//需要调用http://localhost:8080/demo/wx/swiperImgs接口地址拿数据
    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": "北京市·朝阳区"
      }
    ]
  },

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  //加载图片
  loadSwiperImgs(){
    let that=this;
     // http://localhost:8080/demo/wx/swiperImgs
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }
})

index.wxml

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<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>
<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.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

此时的效果图：

 我们对其进行调整

index.wxss

/* pages/index/index.wxss */
page{
	height: 100%;
	background-color: #efeff4;
}
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}
.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.wxml

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<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>
<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>

效果：

 

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

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

相关文章

CompletableFuture详解

CompletableFuture详解

CompletableFuture详解 概要 RunnableThread虽然提供了多线程的能力但是没有返回值。CallableThread的方法提供多线程和返回值的能力但是在获取返回值的时候会阻塞主线程。 上述的情况只适合不关心返回值&#xff0c;只要提交的Task执行了就可以。另外的就是能够容忍等待。 C…
阅读更多...
Java并发容器

Java并发容器

一、并发容器总结1、大部分在 java.util.concurrent 包中。ConcurrentHashMap: 线程安全的HashMapCopyOnWriteArrayList: 线程安全的List&#xff0c;在读多写少的场合性能非常好&#xff0c;远远好于Vector.ConcurrentLinkedQueue: 高效的并发队列&#xff0c;使用链表实现。可…
阅读更多...
[ 数据结构 ] 平衡二叉树(AVL)--------左旋、右旋、双旋

[ 数据结构 ] 平衡二叉树(AVL)--------左旋、右旋、双旋

0 引出 数列{1,2,3,4,5,6}&#xff0c;要求创建一颗二叉排序树(BST), 并分析问题所在 回顾:二叉搜索树 左子树全部为空&#xff0c;从形式上看&#xff0c;更像一个单链表.插入速度没有影响查询速度明显降低(因为需要依次比较), 不能发挥 BST的优势&#xff0c;因为每次还需要…
阅读更多...
第四十二章 动态规划——数字三角形模型

第四十二章 动态规划——数字三角形模型

第四十二章 动态规划——数字三角形模型一、数字三角形模型1、什么是数字三角形模型二、例题1、AcWing 1015. 摘花生&#xff08;1&#xff09;问题&#xff08;2&#xff09;思路状态表示状态转移循环设计初末状态&#xff08;3&#xff09;代码2、AcWing 1018. 最低通行费&am…
阅读更多...
第二章：感知机

第二章：感知机

文章目录2.1感知机模型2.2感知机策略2.3梯度下降法2.4感知机-原始算法形式2.5感知机-原始算法实例2.6感知机-对偶形式2.7感知机-对偶形式实例2.8感知机算法收敛性证明如下&#xff1a;2.1感知机模型 2.2感知机策略 损失函数非负&#xff0c;策略是选择使其最小的模型参数 2.3梯…
阅读更多...
【Linux工具】-gcc/g++

【Linux工具】-gcc/g++

gcc/g一&#xff0c;简介二&#xff0c;代码的翻译过程1&#xff0c;预处理2&#xff0c;编译3&#xff0c;汇编4&#xff0c;链接&#xff08;1&#xff09;静态库&#xff08;2&#xff09;动态库&#xff08;3&#xff09;动静态库比较三&#xff0c;常见选项一&#xff0c;…
阅读更多...
模板（C++）

模板（C++）

模板&#xff08;C&#xff09;泛型编程函数模板概念格式原理实例化匹配原则类模板定义格式实例化泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int& left, int& right) {int tmp left;left right;right tmp; }void Swap(double& left, doub…
阅读更多...
【Spring6源码・IOC】BeanDefinition的加载

【Spring6源码・IOC】BeanDefinition的加载

哎呀&#xff0c;又是午夜时分&#xff0c;又是一个失眠的夜晚&#xff0c;和去年一样&#xff0c;记得去年今日&#xff0c;也是睡不着觉&#xff0c;就注册了csdn的账号&#xff0c;开始写东西&#xff0c;csdn真是深夜最好的安魂剂。 Spring都发布了6.0&#xff0c;这不赶紧…
阅读更多...
2022.12青少年软件编程（Python）等级考试试卷（三级）

2022.12青少年软件编程（Python）等级考试试卷（三级）

2022.12.10青少年软件编程（Python）等级考试试卷（三级） 一、单选题(共25题，共50分) 1.列表L1中全是整数，小明想将其中所有奇数都增加1，偶数不变，于是编写了如下图所示的代码。 请问，图中红线处，代码应该是？（D） A. x || 2 B. x ^ 2 C. x && 2 D. x %…
阅读更多...
JS日期与字符串相互转换（时间格式化YYYY-MM-DD，Dayjs的使用）

JS日期与字符串相互转换（时间格式化YYYY-MM-DD，Dayjs的使用）

JS日期与字符串相互转换——JS封装函数&#xff0c;Dayjs转换时间格式相关文章调用场景复现一、JS封装函数1、日期转字符串2、字符串转日期二、 Dayjs转换时间格式1、Dayjs快速安装与使用2、Dayjs格式化日期相关文章调用 文章内容文章链接JS数组对象——根据日期进行排序&…
阅读更多...
南邮数据结构考研常用算法

南邮数据结构考研常用算法

1.链表 在带头结点的链表中&#xff0c;删除所有值为x的结点 void Del_X(Linklist &L,ElemType x){LNode *pL->next, *preL,*q;while (p!null){if (p->datax){qp;pp->next;pre->nextp;free(q);}else{prep;pp->next;}} }使用单链表进行插入排序 ListNode*…
阅读更多...
数组常用方法总结 (1) ：pop / push / shift / unshift

数组常用方法总结 (1) ：pop / push / shift / unshift

pop 从尾部删除一项。改变原有数组。返回删除掉的内容。 <template><div class"myBlock"><div class"tableBlock"><div class"title">{{ newObject ? "操作后的数组" : "操作前的数组" }}</d…
阅读更多...
从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

往期 从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;二、使用element-ui&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;三、使用SCSS/LESS&#xff0c;安装图标库&#xff09; 从0到1完成一个Vu…
阅读更多...
docker安装及安装过程中遇到的问题

docker安装及安装过程中遇到的问题

安装Docker-CE 备注&#xff1a;Docker 安装&#xff0c;请参考 Docker 官⽅⽂档: Install Docker Engine on Ubuntu | Docker Documentation 也可参照如下命令进行快速安装。 Ubuntu 卸载旧版本&#xff08;视需要&#xff09; $ sudo apt-get remove docker docker-engin…
阅读更多...
Java并发（4）- synchronized与CAS

Java并发（4）- synchronized与CAS

引言 上一篇文章中我们说过&#xff0c;volatile通过lock指令保证了可见性、有序性以及“部分”原子性。但在大部分并发问题中&#xff0c;都需要保证操作的原子性&#xff0c;volatile并不具有该功能&#xff0c;这时就需要通过其他手段来达到线程安全的目的&#xff0c;在Ja…
阅读更多...
因子图--isam相关内容总结

因子图--isam相关内容总结

编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;编辑切换为居中添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;平方根法--通过平方根的方法&#xff0c;发现矩阵新增加的变量都会出现在最后一行。Givens旋转方法求解Ax…
阅读更多...
Linux环境下，java调用C/C++动态库

Linux环境下，java调用C/C++动态库

目录 一、环境准备 1、安装gcc/g 2、下载jdk库并配置运行环境 二、配合Java程序创建C程序的动态库 1、生成要求清单 2、交给C 去实现 (1) 接口函数实现 (2) 创建动态库 (3) 检查动态库是否正常链接 3、测试&#xff1a;Java程序调用C动态库 一、环境准备 既然是同时…
阅读更多...
百万级数据以Excel形式导出

百万级数据以Excel形式导出

(1).主要考虑到两个方面&#xff0c;第一个方面是内存溢出问题&#xff0c;所以选用阿里的EasyExcel因为它对POI进行了封装功能强大&#xff1b;第二个方面是由于excel版本导致Sheet存储容量不一样&#xff0c;cexcel2003(.xls)每个Sheet只能存6万多条数据而cexcel2007(xlsx)能…
阅读更多...
【自学Python】Python布尔型(bool)

【自学Python】Python布尔型(bool)

Python布尔型(bool) Python布尔型(bool)教程 Python 布尔类型也叫 bool 类型&#xff0c;Python 布尔类型取值为 True 和 False。Python bool 类型的 True 表示条件为真&#xff0c; False 表示条件为假。 Python布尔型(bool) Python 中的布尔类型可以当做 整数 来对待&…
阅读更多...
LeetCode 287. 寻找重复数难度中等2004

LeetCode 287. 寻找重复数难度中等2004

&#x1f308;&#x1f308;&#x1f604;&#x1f604;欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 287. 寻找重复数难度中等2004&#xff0c;做好准备了么&#xff0c;那么开始吧。&#x1f332;&#x1f332;&#x1f434;&#x1f434;一、题目名称LeetCo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023