网站首页设计报价多少,几个做ppt的网站知乎,泉州网站建设开发,淘宝官网首页进入一、Flex弹性布局 布局的传统解决方案#xff0c;基于盒状模型#xff0c;依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便#xff0c;比如#xff0c;垂直居中就不容易实现。 2009年#xff0c;W3C提出了一种新的方案—-Flex布局#xff0c;可… 一、Flex弹性布局 布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。 2009年W3C提出了一种新的方案—-Flex布局可以简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持这意味着现在就能很安全地使用这项功能。
1.Flex布局是什么 Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex;
} 行内元素也可以使用Flex布局。
.box{display: inline-flex;
} Webkit内核的浏览器必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;
} 注意设为Flex布局以后子元素的float、clear和vertical-align属性将失效。 2.基本概念 采用Flex布局的元素称为Flex容器flex container简称”容器”。它的所有子元素自动成为容器成员称为Flex项目flex item简称”项目”。 容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点叫做main start结束位置叫做main end交叉轴的开始位置叫做cross start结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size占据的交叉轴空间叫做cross size。
3.容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向即项目的排列方向。
.box {flex-direction: row | row-reverse | column | column-reverse;
} 它可能有4个值。
row默认值主轴为水平方向起点在左端。 row-reverse主轴为水平方向起点在右端。 column主轴为垂直方向起点在上沿。 column-reverse主轴为垂直方向起点在下沿。 3.2 flex-wrap属性 默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行。
.box{flex-wrap: nowrap | wrap | wrap-reverse;
} 它可能取三个值。
1nowrap默认不换行。 2wrap换行第一行在上方。 3wrap-reverse换行第一行在下方。 3.3 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。
.box {flex-flow: flex-direction flex-wrap;
} 3.4 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around;
} 它可能取5个值具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start默认值左对齐 flex-end右对齐 center 居中 space-between两端对齐项目之间的间隔都相等。 space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
} 它可能取5个值。具体的对齐方式与交叉轴的方向有关下面假设交叉轴从上到下。
flex-start交叉轴的起点对齐。 flex-end交叉轴的终点对齐。 center交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度。 3.6 align-content属性 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 该属性可能取6个值。
flex-start与交叉轴的起点对齐。 flex-end与交叉轴的终点对齐。 center与交叉轴的中点对齐。 space-between与交叉轴两端对齐轴线之间的间隔平均分布。 space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。 stretch默认值轴线占满整个交叉轴。
二、首页布局搭建
1.底部页面的搭建
一个微信小程序必不可少的就是底部导航栏所以我们先搭建一个底部导航栏 根据微信小程序的开发者文档可知底部导航栏需要在api.json定义tabBar并做好相应的配置注意先在pages做好页面的定义。
底部导航栏没有图标是显得非常单调的所以我们还要创建一个文件夹名为static用来存放图片
继续在static文件夹下创建一个文件名为tabBar将我们所需的图标放入搭配属性iconPath引用图标即可。
在app.josn加入
// app.json部分代码展示pages:[pages/index/index,pages/meeting/list/list,pages/vote/list/list,pages/ucenter/index/index,pages/logs/logs],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: 设置}]}
效果展示 2.首页轮播图搭建
新建一个名为config的文件夹文件夹下新建api.js专门放接口地址 如下 并且在api.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, //会议信息
}; 在index.js中加入以下代码
const api require(../../config/api)data: {imgSrcs:[]},loadSwiperImgs(){let thatthis;wx.request({url: api.SwiperImgs,dataType: json,success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})},
加入后重新编译代码会报错了错误信息如下 这样的问题是因为微信开发者程序默认是校验合法域名的所以我们需要设置以下如下 但是在此后我们发现它又报了另一个错误如下 这是我们请求后台服务器时出现错误但是我们并没有启动后台服务器因为是用Mock模拟后台给前台响应数据所以这里我们启用一下Mock就可以了具体操作如下 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;charsetutf-8}
}
重新编译就不会出现问题了
到这里就算拿到我们的后台数据了。接着继续优化我们的代码如下
在index.wxml中加入以下代码
!--pages/index/index.wxml--
viewswiper indicator-dotstrue autoplaytrue block wx:for{{imgSrcs}} wx:key*textswiper-itemimage src {{item.img}}/image/swiper-item/block/swiper
/view 效果图 三、首页布局
轮播图我们已经弄好了接下来就是会议信息等代码了如下
先在index.wxml中加入以下代码
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.location}}/text|text{{item.starttime}}/text/view/view/view
/block
view classsection bottom-linetext到底啦/text
/view
然后在index.wxss中加入以下样式代码如下
/* pages/index/index.wxss */
.mobi-title{background-color: lightgray;padding: 10px;
}
.mobi-icon{border: 1rpx solid rgb(250, 126, 126);margin-right: 5px;
}
.mobi-title text{font-weight: 700;color: lightslategrey;
}
.list{display: flex;align-items: center;border-bottom: 3px solid lightgray;
}
.list-img{padding: 0 10px;
}
.video-img{height: 80px;width: 80px;
}
.list-title{font-weight: 700;margin: 3px 0;
}
.list-tag{display: flex;align-items: center;
}
.state{border: 2px solid lightblue;padding: 3px 6px;color: lightblue;margin: 0 5px 10px 0;
}
.join{color: lightgray;
}
.list-num{color: red;font-weight: 700;
}
.list-info{color: lightgray;font-size: 12px;
}
效果图
