高端网站名字,秦皇岛seo,国内做外单的网站有哪些,广州网站app制作公司首先让我们来学习以下Flex布局
一#xff0c;Flex布局简介
布局的传统解决方案#xff0c;基于盒状模型#xff0c;依赖 display属性 position属性 float属性
Flex布局简介 Flex是Flexible Box的缩写#xff0c;意为”弹性布局”#xff0c;用来为盒状模型提供最大的…首先让我们来学习以下Flex布局
一Flex布局简介
布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性
Flex布局简介 Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: ‘flex’ 容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点叫做main start结束位置叫做main end交叉轴的开始位置叫做cross start结束位置叫做cross end 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size占据的交叉轴空间叫做cross size。 Flex的属性
以下6个属性设置在容器上 flex-direction 主轴的方向 默认为row flex-wrap 如果一条轴线排不下如何换行 flex-flow 是flex-direction属性和flex-wrap属性的简写形式 justify-content 定义了项目在主轴上的对齐方式 align-items 定义项目在交叉轴上如何对齐 align-content 属性定义了多根轴线的对齐方式 注意设为Flex布局以后子元素的float、clear和vertical-align属性将失效
flex-direction属性 .box {flex-direction: row | row-reverse | column | column-reverse;
} 它可能有4个值 row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向起点在上沿。column-reverse主轴为垂直方向起点在下沿 flex-wrap属性 默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行 .box{flex-wrap: nowrap | wrap | wrap-reverse;
} 1nowrap默认不换行。 2wrap换行第一行在上方。 3wrap-reverse换行第一行在下方。 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。 .box {flex-flow: flex-direction flex-wrap;
} 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每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 .box {align-items: flex-start | flex-end | center | baseline | stretch;
} 它可能取5个值。具体的对齐方式与交叉轴的方向有关下面假设交叉轴从上到下。 flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度 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.底部页面的搭建
在官网找到taaBar首先搭建底部菜单将里面的数据根据自身修改即可
app.js配置
// 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: 设置}]}
底部导航栏没有图标是显得非常单调的所以我们还要创建一个文件夹名为static用来存放图片
继续在static文件夹下创建一个文件名为tabBar将我们所需的图标放入搭配属性iconPath引用图标即可 效果 2.首页轮播图搭建
2.1 轮播图搭建
为了后期方便维护我们先将所有的后端接口通过一个文件来保存在根目录下新建config文件夹随后建立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, //会议信息};
2.2.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}
} 因为我们现在的小程序开发默认检查安全证书域名为https所以我们的请求过不去我们只需点击微信小程序开发中的详情按钮再继续点击本地设置将不校验合法域名选项打开 我们编译之后查看编译器里打印的数据 我们在主页编写方法测试
// index.js
// 获取应用实例
const app getApp()
const api require(../../config/api)
Page({data: {imgSrcs:[]},// 事件处理函数bindViewTap() {wx.navigateTo({url: ../logs/logs})},
// 轮播图的方法
loadSwiperImgs(){let thatthis;wx.request({url: api.SwiperImgs,dataType: json,success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}// 一进来就调用轮播图的方法this.loadSwiperImgs();},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息开发者每次通过该接口获取用户个人信息均需用户确认开发者妥善保管用户快速填写的头像昵称避免重复弹窗wx.getUserProfile({desc: 展示用户信息, // 声明获取用户个人信息后的用途后续会展示在弹窗中请谨慎填写success: (res) {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息预计自2021年4月13日起getUserInfo将不再弹出弹窗并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})
上面代码中关键性代码
const api require(../../config/api) Page({data: {imgSrcs:[]},
// 轮播图的方法
loadSwiperImgs(){let thatthis;wx.request({url: api.SwiperImgs,dataType: json,success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}// 一进来就调用轮播图的方法this.loadSwiperImgs();}
})
2.3建立轮播图
液位我们在前面已经建立了数据所以我们在这里进行一个轮播图的的页面编写
viewswiper autoplaytrue indicator-dotstrue indicator-color#fff indicator-active-color#00fblock wx:for{{imgSrcs}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiper
/view
3、首页内容搭建 我们照猫画虎和我们轮播图的流程一样定义接口发送ajax再利用Mock模拟数据根据官网提供的组件进行完善。
3.1.会议信息ajax //首页会议信息的ajaxloadMeetingInfos(){let thatthis;wx.request({url: api.MettingInfos,dataType: json,success(res) {console.log(res)that.setData({lists:res.data.lists})}})}
注意在data中定义属性lists和onLoad函数中调用该方法
3.2.Mock模拟数据 上图中JSON数据包
{data: {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: 北京市·朝阳区}]},statusCode: 200,header: {content-type:applicaiton/json;charsetutf-8}
} 3.3.搭建会议信息
布局
index.wxml
view classmobi-titletext classmobi-icon/texttext classmobi-text会议信息/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 classsectiontext到底啦/text
/view
css样式
index.wxss
/**index.wxss**/
.section{color: #aaa;display: flex;justify-content: center;
}.list-info {color: #aaa;
}.list-num {color: #e40909;font-weight: 700;
}.join {padding: 0px 0px 0px 10px;color: #aaa;
}.state {margin: 0px 6px 0px 6px;border: 1px solid #93b9ff;color: #93b9ff;
}.list-tag {padding: 3px 0px 10px 0px;display: flex;align-items: center;
}.list-title {display: flex;justify-content: space-between;font-size: 11pt;color: #333;font-weight: bold;}.list-detail {display: flex;flex-direction: column;margin: 0px 0px 0px 15px;
}.video-img {width: 80px;height: 80px;
}.list {display: flex;flex-direction: row;border-bottom: 1px solid #6b6e74;padding: 10px;
}.mobi-text {font-weight: 700;padding: 15px;
}.mobi-icon {border-left: 5px solid #e40909;
}.mobi-title {background-color: rgba(158, 158, 142, 0.678);margin: 10px 0px 10px 0px;
}.swiper-item {height: 300rpx;width: 100%;border-radius: 10rpx;
}.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.usermotto {margin-top: 200px;
}
效果演示
