微信小程序会议OA系统

这篇具有很好参考价值的文章主要介绍了微信小程序会议OA系统。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flex弹性布局

Flex弹性布局是一种 CSS3 的布局模式,也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间,使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。

在使用Flexbox弹性布局时,首先需要创建一个容器和若干个子元素。容器的属性display需要设置为flex或inline-flex以启用Flexbox布局。而子元素的属性则需要使用弹性属性,如flex-grow、flex-shrink、flex-basis等来控制它们的自适应性和布局方式。

Flexbox弹性布局的优点在于它可以轻松处理不同屏幕尺寸和方向的布局问题,使得网页设计更加灵活和自适应。同时,它也可以很好地结合其他CSS属性和技术,如媒体查询、响应式图片等,来实现更加丰富和复杂的网页设计效果。

Flexbox

布局的语法网站:https://www.runoob.com/w3cnote/flex-grammar.html

Flexbox提供了一系列的CSS属性,用于控制容器和项目的行为。以下是一些常用的属性:

  1. display: 定义一个容器是flex或inline-flex布局。

  2. justify-content: 用来定义项目在主轴上的对齐方式,可以设置的值包括:flex-start, flex-end, center, space-between, space-around。

  3. align-items: 用来定义项目在交叉轴上的对齐方式,可以设置的值包括:flex-start, flex-end, center, baseline, stretch。

  4. flex-direction: 用来定义主轴的方向,可以设置的值包括:row, row-reverse, column, column-reverse。

  5. flex-wrap: 用来定义多行排列时,是否换行,可以设置的值包括:nowrap, wrap, wrap-reverse。

  6. align-content: 用来定义多行排列间的对齐方式,可以设置的值包括:flex-start, flex-end, center, space-between, space-around, stretch。

  7. flex: 项目的综合属性,包括flex-grow, flex-shrink, flex-basis三个属性,用来控制项目在容器中的尺寸和自适应性。

除了以上属性外,Flexbox还提供了一些其他的属性,如order、align-self、flex-flow等,用于更加细致地控制项目的排列和布局。

图片解析:

微信小程序会议OA系统,微信小程序,小程序

Flex弹性布局具有以下特点:

  1. 容器内的项目可以沿着主轴和交叉轴自由排列,控制项目的排列和布局非常灵活。

  2. 容器的尺寸可以根据其中的项目自适应变化,适用于响应式设计。

  3. 可以控制项目在主轴和交叉轴上的对齐方式,适用于排版和布局。

  4. 可以通过简单的属性和值的组合实现复杂的布局。

  5. 支持多行排列,可以用来实现栅格布局等网页布局方案。

  6. 可以通过flex-grow、flex-shrink、flex-basis等属性控制项目的尺寸和自适应性。

总之,Flex弹性布局是现代网页设计中非常流行的一种布局方式,具有强大的控制能力和灵活的布局特性,可以帮助开发者实现各种复杂的排版和布局需求。

flex-wrap属性

nowrap(默认):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。

代码如下
list.wxss
/* pages/vote/list/list.wxss */
.box{
  height: 750rpx;
  width: 750rpx;
  background-color: aquamarine;
  display: flex;
  /* flex-direction: column-reverse; */
  flex-wrap: wrap;
  /* flex-flow: row wrap; */
  /* justify-content: flex-end; */
  align-items: flex-end;
}
view{
  height: 180rpx;
  width: 100rpx;
  border: 1px solid red;
}

微信小程序会议OA系统,微信小程序,小程序

 OA会议首页

点击我们的Shift+Alt+R,选择我们的显示资源管理器,将我们的static静态资源复制到存放代码的区间中

微信小程序会议OA系统,微信小程序,小程序

app.json
{
  "pages": [
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index",
    "pages/logs/logs"

  ],
  "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"
}
index.js 

// 获取应用实例
const api = require("../../config/api")
// pages/meeting/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
		imgSrcs:[]
		,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;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
	}
})
 index.wxml
<!--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>
<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>

微信小程序会议OA系统,微信小程序,小程序微信小程序会议OA系统,微信小程序,小程序

 JSON
{
  "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"
  }
}
 index.wxss
page{
	height: 100%;
	background-color:#efeff4;
}
.swiper-item {
	height: 350rpx;
	width: 100%;
	border-radius: 10rpx;
}
.mobi-title{
font-size: 18px;
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:30rpx 0 0 0 ;
}
.list-detail{
margin:0 0 0 10rpx;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 10px 0 ;
}
.state{
border: 3px  solid lightblue;
padding: 2px;
color: lightblue;
}
.join{
	border: 3px  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;
}

微信小程序会议OA系统,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-713662.html

到了这里,关于微信小程序会议OA系统的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之开发会议OA项目

    目录 前言 本篇目标  首页 会议 投票  个人中心  会议OA项目-首页 配置 tabbar mock工具 page swiper 会议信息 会议OA项目-会议  自定义tabs组件 会议管理 会议OA项目-投票 会议OA项目-个人中心 文章含源码资源,投票及个人中心详细自行查看源码即可 小程序没有DOM对象,一切基于组

    2024年02月19日
    浏览(46)
  • 微信小程序&会议OA-登录获取手机号流程&登录-小程序&导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

    目录 获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.j

    2024年02月04日
    浏览(51)
  • 微信小程序之会议OA首页后台交互

    springboot+mybatis appliation.yml 生成mapper接口,model实体类,mapper映射文件 application.yml 在启动类 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象

    2024年02月20日
    浏览(42)
  • 微信小程序之会议OA个人中心后台交互

    目录 获取用户昵称头像和昵称 小程序登录 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    浏览(63)
  • 【微信小程序】自定义组件布局会议OA其他页面(附源码)

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的

    2024年02月08日
    浏览(47)
  • 微信小程序 —— 会议OA项目首页布局与Mock数据交互

    14天阅读挑战赛 如果世界上有奇迹,那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性   二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建  布局的传统解决方案,基于盒状模型,依赖 dis

    2024年02月08日
    浏览(43)
  • 微信小程序之会议OA首页数据交互,会议状态,会议人数转换,会议室交互,WXS的使用

    前言: 本篇博客使用结合了SpringMVC,mybatis,maven,小程序,如果不熟悉使用可以翻看我之前的博客,以便大家可以更好的学习!!! 这是我们今天完成后的效果: 1.1启动开发工具,导入后台 导入框架: 配置maven 注意数据库的名称: 启动 1.2导入数据表 1.3前台页面的编码(

    2024年02月08日
    浏览(53)
  • 微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)

    目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解  1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 justify-content属性 1.4.5 align-items属性 1.4.6 

    2024年02月05日
    浏览(41)
  • 会议室预订小程序,共享会议室小程序,微信小程序会议室预约系统毕设作品

    目的 :本课题主要目标是设计并能够实现一个基于微信小程序会议室预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构;通过后台添加会议室信息、管理用户信息、管理预约信息;前台用户通过小程序登录,查看会议室信息、发起预约。 意义 :微信小程序会

    2024年02月08日
    浏览(55)
  • 微信小程序共享会议室预约系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包