微信小程序-flex弹性布局

最新推荐文章于 2025-02-26 10:39:02 发布

Yfzm_c

最新推荐文章于 2025-02-26 10:39:02 发布

阅读量538

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 css flex

本文链接：https://blog.youkuaiyun.com/Weirdo_ran/article/details/120165366

微信小程序专栏收录该内容

17 篇文章

订阅专栏

本文讲解了如何在页面中使用Flex布局使内容居中，并结合底部导航栏（TabBar）的配置，展示了如何在App.json中设置多页面切换。重点介绍了`align-items`和`justify-items`属性在调整布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!--pages/one/one.wxml-->
<view class="pageview">
    <view class="topview">
        嘉然今天吃什么
    </view>

    <view class="midview">
        嘉然今天吃什么
    </view>
</view>

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;
}