龙岩做网站开发哪家公司好,微网站建设方案财政,建设部网站投诉如何注册,扬中本地论坛小程序首页搭建 1. Flex布局是什么#xff1f;2. 容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow属性2.4 justify-content属性2.5 align-items属性2.6 align-content属性 二.首页布局搭建二.1moke模拟数据实现轮播图4.信息搭建 Flex弹性布局
1. Flex布局是… 小程序首页搭建 1. Flex布局是什么2. 容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow属性2.4 justify-content属性2.5 align-items属性2.6 align-content属性 二.首页布局搭建二.1moke模拟数据实现轮播图4.信息搭建 Flex弹性布局
1. Flex布局是什么
Flex布局是一种用于在容器中进行灵活排列和对齐子元素的CSS布局模型。它的全称为Flexible Box又称为弹性布局。通过设置容器的属性我们可以实现自适应布局并轻松地进行响应式设计。
在传统的网页布局中我们通常使用盒模型和浮动来实现元素的排列和对齐。但是这种方式存在许多限制和兼容性问题。而Flex布局则提供了更加灵活和简便的方式来控制元素的布局。
Flex布局的核心思想是将容器分为主轴和交叉轴并基于主轴和交叉轴来排列和对齐子元素。主轴可沿水平方向从左到右或垂直方向从上到下交叉轴则与主轴垂直。
通过设置容器的属性我们可以控制子元素在主轴和交叉轴上的排列顺序、尺寸和对齐方式。同时Flex布局还支持自动换行、均匀对齐等功能使得页面布局更加灵活、自适应和响应式。
总结来说Flex布局是一种强大且易用的CSS布局模型通过简单的属性设置可以实现各种复杂的布局需求提升网页设计和开发的效率。。
2. 容器的属性
2.1 flex-direction属性
flex-direction属性用于定义子元素在容器中的排列方向。它决定了主轴main axis的方向从而影响子元素的排列方式。常见的取值有以下四种
row默认值子元素水平方向从左到右排列。主轴起点在左侧终点在右侧。
row-reverse子元素水平方向从右到左排列。主轴起点在右侧终点在左侧。
column子元素垂直方向从上到下排列。主轴起点在上方终点在下方。
column-reverse子元素垂直方向从下到上排列。主轴起点在下方终点在上方。
这些取值决定了子元素在主轴上的顺序和对齐方式。通过设置flex-direction属性我们可以轻松改变子元素的排列方向适应不同的布局需求。需要注意的是该属性只会影响子元素的排列顺序不会改变子元素本身的方向属性比如文本的方向等。。
2.2 flex-wrap属性
flex-wrap属性用于定义子元素在容器中是否换行显示。它决定了子元素的排列方式当子元素超出容器的尺寸时是否允许换行。常见的取值有以下三种
nowrap默认值子元素不换行所有项目在一行或一列显示。
wrap子元素换行超出容器的项目会移动到下一行或下一列显示。
wrap-reverse子元素换行超出容器的项目会从后面开始移动到上一行或上一列显示。
这些取值决定了子元素在容器中的排列方式。通过设置flex-wrap属性我们可以控制子元素是否换行适应不同的布局需求。需要注意的是该属性只在子元素的总尺寸超出容器时才会生效如果子元素的总尺寸小于等于容器的尺寸则不会发生换行。同时flex-wrap属性与flex-direction属性相互关联当子元素换行时它们的排列方向也会受到影响。
2.3 flex-flow属性
flex-flow属性是flex-direction和flex-wrap两个属性的简写形式。它用于同时设置子元素在容器中的排列方向flex-direction和是否换行flex-wrap。通过设置flex-flow属性我们可以方便地一次性定义这两个属性的取值。
flex-flow属性的语法为flex-flow: ;
其中表示子元素的排列方向可以取值为row、row-reverse、column或column-reverse表示是否允许换行可以取值为nowrap、wrap或wrap-reverse。
例如flex-flow: row wrap; 表示子元素水平方向从左到右排列并允许换行。
使用flex-flow属性的好处在于简化了代码减少了重复的属性设置。而且通过一条属性即可控制子元素的排列方向和换行情况提高了开发效率。
需要注意的是flex-flow属性的默认值为row nowrap。如果只需要设置其中一个属性而保持另一个属性的默认值可以单独使用相应的属性进行设置。
2.4 justify-content属性
justify-content属性用于定义子元素在主轴上的对齐方式。它决定了子元素沿主轴的排列方式当容器空间大于子元素总尺寸时可以通过该属性来控制子元素在容器中的水平或垂直对齐方式。常见的取值有以下几种
flex-start默认值子元素在主轴起点对齐。
flex-end子元素在主轴终点对齐。
center子元素在主轴居中对齐。
space-between子元素在主轴两端对齐剩余的空间平均分布在子元素之间。
space-around子元素在主轴各个位置均匀分布并且每个子元素周围有相等的空间。
space-evenly子元素在主轴各个位置均匀分布包括首尾两端和子元素之间的空间都相等。
通过设置justify-content属性我们可以调整子元素在容器中的水平或垂直位置使布局更加灵活、美观。需要注意的是该属性只对具有一定剩余空间的情况下生效如果子元素的总尺寸大于容器的尺寸则不会发生对齐操作。同时该属性只影响主轴上的对齐方式与交叉轴上的对齐方式无关。
2.5 align-items属性
align-items属性用于定义子元素在交叉轴上的对齐方式。它决定了子元素沿交叉轴的排列方式当容器空间大于子元素总尺寸时可以通过该属性来控制子元素在容器中的垂直或水平对齐方式。常见的取值有以下几种
stretch默认值子元素沿交叉轴拉伸填满容器的高度或宽度。
flex-start子元素在交叉轴起点对齐。
flex-end子元素在交叉轴终点对齐。
center子元素在交叉轴居中对齐。
baseline子元素以其基线对齐如果子元素是文本则以文本基线对齐。
通过设置align-items属性我们可以调整子元素在容器中的垂直或水平位置使布局更加灵活、美观。需要注意的是该属性只对具有一定剩余空间的情况下生效如果子元素的总尺寸大于容器的尺寸则不会发生对齐操作。同时该属性只影响交叉轴上的对齐方式与主轴上的对齐方式无关。
此外还有align-self属性可用于单独设置某个子元素在交叉轴上的对齐方式该属性优先级高于align-items属性。这样可以针对个别子元素进行特殊的对齐设置使布局更加灵活多样。
2.6 align-content属性
align-content属性用于定义多行或多列子元素在交叉轴上的对齐方式。它是应用于容器上的属性当容器内存在多行flex-wrap为wrap或wrap-reverse时或多列flex-direction为column或column-reverse时的子元素时align-content属性可以控制这些行或列的整体对齐方式。常见的取值有以下几种
stretch默认值子元素沿交叉轴拉伸填满容器的高度或宽度。
flex-start多行或多列子元素在交叉轴起点对齐。
flex-end多行或多列子元素在交叉轴终点对齐。
center多行或多列子元素在交叉轴居中对齐。
space-between多行或多列子元素在交叉轴两端对齐剩余的空间平均分布在行或列之间。
space-around多行或多列子元素在交叉轴各个位置均匀分布并且每行或列周围有相等的空间。
space-evenly多行或多列子元素在交叉轴各个位置均匀分布包括首尾两端和行或列之间的空间都相等。
通过设置align-content属性我们可以调整多行或多列子元素在交叉轴上的整体对齐方式以实现更灵活、美观的布局效果。需要注意的是该属性只对具有一定剩余空间的情况下生效如果子元素的总尺寸大于容器的尺寸则不会发生对齐操作。同时如果只有一行或一列的子元素align-content属性将不起作用。
二.首页布局搭建
1.导入static文件 2.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
}3.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: WxApiRootswiperImgs, //轮播图MettingInfos: WxApiRootmeeting/list, //会议信息};二.1moke模拟数据实现轮播图
. 模拟的数据·:
{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
}index.js
// pages/index/index.js
const apirequire(../../config/app.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: 北京市·朝阳区}]},loadSwiperImgs(){let thatthis;wx.request({url: api.SwiperImgs,dataType: json,success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {
this.loadSwiperImgs();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})搭建轮播图
swiper indicator-dotstrueautoplaytrue duration{{duration}}block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src {{item.img}}/image/swiper-item/block/swiper
轮播图功能已经实现
4.信息搭建
index.wxml
!--pages/index/index.wxml--
!-- textpages/index/index.wxml/text --
viewswiper indicator-dotstrueautoplaytrue duration{{duration}}block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src {{item.img}}/image/swiper-item/block/swiper
/view
!-- view classtop/view
view classdown
view classlistview classleft/viewview classright/view
/view --
!-- /view --
view classmobi-titletext classmobi-icon/texttext会议信息/text
/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{item.state}}/viewview classjointext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{item.address}}/text|text{{item.time}}/text/view/view/view
/block
view classsection bottom-linetext到底啦/text
/viewindex.wxss
!--pages/index/index.wxml--
!-- textpages/index/index.wxml/text --
viewswiper indicator-dotstrueautoplaytrue duration{{duration}}block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src {{item.img}}/image/swiper-item/block/swiper
/view!-- /view --
view classmobi-titletext classmobi-icon/texttext会议信息/text
/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{item.state}}/viewview classjointext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{item.address}}/text|text{{item.time}}/text/view/view/view
/block
view classsection bottom-linetext到底啦/text
/viewindex.js
// pages/index/index.js
const apirequire(../../config/app.js)Page({/*** 页面的初始数据*/data: {imgSrcs:[{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}],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: 北京市·朝阳区}]},loadSwiperImgs(){// let thatthis;// wx.request({// url: api.SwiperImgs,// dataType: json,// success(res) {// console.log(res)// that.setData({// imgSrcs:res.data.images// })// }// })},/*** 生命周期函数--监听页面加载*/onLoad(options) {
this.loadSwiperImgs();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})效果;
