| 微信小程序 | 您所在的位置：网站首页 › 微信小程序flex是什么意思 › 微信小程序 |
微信小程序
|
display: flex;/*设置弹性布局*/ align-items: center;/* 以上下位基准居中*/ justify-items: center;/*以左右为基准居中*/ 如果设置flex的话，后面两个就没有。 而且view本来是上下分的，用了在父view中添加flex模块之后，就会变成横着摆。 （如果要实现自动换行，先设置flex-wrap: wrap; 然后比如说要设置三个一行，就可以设置width为30%） 底部导航栏：用tabBar，在app.json里面添加 效果图
app.json { "pages":[ "pages/one/one", "pages/two/two", "pages/three/three", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "list": [ { "pagePath": "pages/one/one", "text": "首页", "iconPath": "pages/images/hu.png", "selectedIconPath": "pages/images/hs.png" }, { "pagePath": "pages/two/two", "text": "发现", "iconPath": "pages/images/fu.png", "selectedIconPath": "pages/images/fs.png" }, { "pagePath": "pages/three/three", "text": "我的", "iconPath": "pages/images/mu.png", "selectedIconPath": "pages/images/ms.png" } ] } }one.wxml 嘉然今天吃什么 嘉然今天吃什么one.wxss /* pages/one/one.wxss */ .pageview{ width: 100%; height: 100vh; } .topview{ width: 100%; height: 20vh; background-color: orange; display: flex; align-items: center;/* 以上下位基准居中*/ justify-items: center;/*以左右为基准居中*/ flex-wrap: wrap; } .midview{ width: 100%; height: 60vh; background-color: pink; display: flex; align-items: center; justify-items: center; } |
【本文地址】
公司简介
联系我们