【微信小程序开发】flex布局在小程序开发项目中的应用详解

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

文章目录

flex布局在小程序中开发中的应用
- 功能页面
- 通知布局
- 底部布局
- 总结

flex布局在小程序中开发中的应用

承接上一章的项目，我们要实现在界面中，点击不同的图标按钮，按钮上有图片有文字，点击到跳转不同的页面，关于图标的排列，我们就用到了flex布局，大概类似如下布局，以下项目中所用到的图片都可以到阿里矢量库下载，关于矢量库的使用，上一章都有详细讲解，感兴趣的朋友可以翻过去回顾下。
在这里插入图片描述

功能页面

index.wxml

<view class="banner">
    <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
        <swiper-item>
            <image src="/images/banner/banner1.jpg" mode="widthFix" style="width: 750rpx;" />
        </swiper-item>
        <swiper-item>
            <image src="/images/banner/banner2.png" mode="widthFix" style="width: 750rpx;" />
        </swiper-item>
        <swiper-item>
            <image src="/images/banner/banner3.jpg" mode="widthFix" style="width: 750rpx;" />
        </swiper-item>
    </swiper>
</view>


<view class="tips">
    <text class="iconfont icon-tishi icon"></text>

    <text>欢迎使用我们的系统，谢谢~~</text>
</view>



<view class="menu">
    <view class="item">
        <image src="/images/menu/ht.png" class="img" />
        <text class="title">物业合同</text>
    </view>
    <view class="item">
        <image src="/images/menu/wyf.png" class="img" />
        <text class="title">物业费</text>
    </view>
    <view class="item">
        <image src="/images/menu/wygl.png" class="img" />
        <text class="title">物业管理</text>
    </view>
    <view class="item">
        <image src="/images/menu/wylx.png" class="img" />
        <text class="title">物业维修</text>
    </view>
    <view class="item">
        <image src="/images/menu/ht.png" class="img" />
        <text class="title">物业合同</text>
    </view>
    <view class="item">
        <image src="/images/menu/wyf.png" class="img" />
        <text class="title">物业费</text>
    </view>
    <view class="item">
        <image src="/images/menu/wygl.png" class="img" />
        <text class="title">物业管理</text>
    </view>
    <view class="item">
        <image src="/images/menu/wylx.png" class="img" />
        <text class="title">物业维修</text>
    </view>

</view>

样式

/**index.wxss**/

  .tips{
    /* 背景色 */
    background-color: #f5eedf;
    /* 字大小 */
    font-size: 38rpx;
    /* 字颜色 */
    color:#a34ee9; 
    /* 圆角效果 */
    border-radius: 50rpx;
    /* 距离上下右左距离 */
    margin:30rpx 10rpx 30rpx 10rpx;
    padding-left:130rpx ;
  }
  .icon{
    padding-right: 8rpx;
  }




  /* flex布局 */
.menu{
    display: flex;
    justify-content: space-between;
    padding: 16rpx;
    border-radius: 10rpx;
    flex-wrap: wrap;
    background-color: powderblue;
  
  }
  
  .item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150rpx;
    height: 200rpx;
    border: rgb(192, 251, 255) solid 1rpx;
    margin: 1rpx;
    background-color: powderblue;
  }
  .img{
    width: 88rpx;
    height: 88rpx;
    border-radius: 10rpx;
  }
  .title{
    margin-top: 12rpx;
    font-size: 24rpx;
  }

显示效果
在这里插入图片描述

通知布局

左边是一个图片，右边是一个文字的公告，公告可以从后端动态加载
#wxml

<view class="notice">
<image src="/images/home/board.png" mode="aspectFit" style="width: 200rpx; height: 100rpx;"/>
<text>通知公告</text>
</view>

###wxss

.notice{
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.notice>text{
  flex-grow:1;
  font-size: 40rpx;
}

显示效果
在这里插入图片描述

底部布局

#wxml

<view class="bottom">
    <view>
        <image src="/images/home/cute_1.jpg" mode="scaleToFill" />
    </view>
    <view>
        <image src="/images/home/cute_2.jpg" mode="scaleToFill" />
    </view>
    <view>
        <image src="/images/home/cute_3.jpg" mode="scaleToFill" />
    </view>
    <view>
        <image src="/images/home/cute_4.jpg" mode="scaleToFill" />
    </view>
</view>

###wxss

.bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.bottom>view>image{
  width: 345rpx;
  padding: 10rpx;
  height: 200rpx;
}