✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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;
}
展示效果
总结
小程序中使用flex布局是不是非常精简，感兴趣的朋友可以一键三连，下一章我们来一起探讨下小程序中页面点击跳转的逻辑实现。
