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

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

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

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

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

展示效果

总结

小程序中使用flex布局是不是非常精简，感兴趣的朋友可以一键三连，下一章我们来一起探讨下小程序中页面点击跳转的逻辑实现。