会议网页设计首页 第1篇
轮播图我们已经弄好了,接下来就是会议信息等代码了,如下:
先在中加入以下代码:
然后在中加入以下样式代码,如下:
最后模拟器演示效果如下:
最后微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)就到这里,祝大家在敲代码的路上一路通畅!
感谢大家的观看 !
会议网页设计首页 第2篇
思路:用Mock模拟后台给前台响应数据
新建一个名为config的文件夹,文件夹下新建专门放接口地址, 如下:
建好之后在中加入以下代码:
然后在中加入以下代码:
加入之后我们重新编译代码,发现报错了,错误信息如下:
这样的问题是因为微信开发者程序默认是校验合法域名的,所以我们需要设置以下,如下:
但是在此后,我们发现它又报了另一个错误,如下:
这个问题是因为我们请求后台服务器时出现错误,但是我们并没有启动后台服务器,因为是用Mock模拟后台给前台响应数据,所以这里我们启用一下Mock就可以了,具体操作如下:
JSON数据包代码如下:
然后我们重新编译代码,控制器效果图如下:
到这里就算拿到我们的后台数据了。接着继续优化我们的代码,如下:
在中加入以下代码:
模拟器展示效果如下:
会议网页设计首页 第3篇
Flex 弹性布局是一种用于网页布局的现代 CSS 技术,旨在更灵活地管理容器内的元素排列和分布,以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型,通过使用 display: flex
属性,你可以将一个容器转变为一个弹性容器,从而控制其内部子元素的排列方式。
在进行Flex弹性布局属性的代码预演前,我们需进行小程序会议OA项目大致架子的搭建,具体操作如下:
先建立一个新的Js项目模板,把pages下的所有目录清空,然后在中加入以下代码:
接着把static静态资源复制到存放代码的区间中,如下:
然后我们的微信开发者工具中就会自动生成目标目录,如下:
到这里我们的会议OA项目架子就搭建好了,效果展示如下:
架子搭好之后我们需要在tab上(一级菜单)演示一下弹性布局到底是什么来帮助大家理解,我们在投票界面来给大家展示一下,首先在中插入以下代码:
然后在中加入样式来帮助大家更直观的看到效果,代码如下:
模拟器展示页面如下:
紧接着我们在页面中.box样式代码块下加入关键代码(Flex弹性布局),如下:
display: flex;
然后我们接着打开模拟器观察页面,如下:
在没有加入flex的时候view块状元素是超出了我们的box盒范围的。但是加入了之后,就可以非常直观的看到我们每一个块状元素设置的大小都是100rpx,12个view块状元素加起来就是1200rpx,但是页面的总宽高设置的是750rpx,但是意外的是750rpx的页面承载了12个view快状元素,这个就是Flex弹性布局的特点。
Flex 弹性布局(Flexbox,也称为弹性盒子布局)是一种用于网页布局的现代 CSS 技术,它引入了一些核心概念,以便更灵活地排列和分布页面上的元素。以下是 Flex 弹性布局的核心概念:
Flex 容器 (Flex Container):
Flex 项 (Flex Items):
主轴 (Main Axis):
交叉轴 (Cross Axis):
主轴起点和终点:
交叉轴起点和终点:
伸缩性 (Flexibility):
初始尺寸 (Flex Basis):
Flex 值 (Flex Value):
排列顺序 (Order):
这些核心概念使得 Flex 弹性布局非常有用,因为它提供了更灵活的布局方式,允许容器内的元素根据容器的大小和方向进行动态排列。这对于实现响应式设计和解决布局问题非常有帮助。
Flex 弹性布局常见属性包括:
display
:
flex-direction
:
flex-wrap
:
justify-content
:
align-items
:
align-content
:
flex
:
flex-grow
:
flex-shrink
:
flex-basis
:
order
:
这些属性是使用 Flex 弹性布局时常用的一些关键属性,通过合理地组合和设置这些属性,可以实现各种不同的布局效果。
flex-direction属性决定主轴的方向(即项目的排列方向)。
在中.box样式代码块下加入以下代码:
加入后模拟器展示如下所示:
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
注:它可能取三个值。分别如下:
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
把flex-derection属性的代码注释后,在中加入以下代码:
模拟器效果演示:
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
跟前面一样,把上一个效果的代码注释掉之后,加入以下代码:
模拟器展示效果如下:
justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
在中加入以下代码:
右对齐展示效果如下:
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
在中加入以下代码:
模拟器展示效果如下:
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
该属性可能取6个值。分别如下: