目录
因为是我们一个组共同设计的,为了尊重别的组员的劳动成果,所以不会写的很详细,只放学到了的部分。
一. 拆解
在设计样例图中,从上到下一共有几个部分:
1. 轮播图
2. 消息浮窗=>更换为悬浮图标
3. 九宫格
4. 分区按钮
5. tabbar
二. 轮播图
插件swiper
indicator-dots会在图片底部显示小圈圈
circular会让图片循环播(即不存在拉到最后一张就不能拉了)
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperlist}}" wx:key="id">
<image src="{{item.image}}"/>
</swiper-item>
</swiper>
三. 消息浮窗(网上有全部代码)
四. 九宫格
xml部分很简单,因为是很多图片以及对应的字,所以用一个数组存储图片路径和下面要配的字,重点看一下wxss文件
主要在display:flex的设置,如果想要九宫格之间有线,用space就好了
.grid-item-child {
display:flex;
display: -webkit-flex;
justify-content:center;
flex-direction: column;
flex-wrap: wrap;
float: left;
width: 33.33333333%;
height: 200rpx;
box-sizing: border-box;
background-color: #FFFFFF;
}
/*
icon样式
*/
.grid-item-icon {
height:50%;
width:50%;
left:23%;
top:27%;
display:flex;
display: -webkit-flex;
justify-content:center;
margin-left: 50rpx;
}
/*
文本样式
*/
.grid-item-label {
display:flex;
display: -webkit-flex;
justify-content:center;
color: #666;
font-size: 25rpx;
}
<view class='grid-item-container'>
<block wx:for="{{iconsrc}}" wx:key="index">
<view class='grid-item-child'>
<view>
<image class='grid-item-icon' src="{{item.path}}" mode="widthFix" />
<text class='grid-item-label'>{{item.type}}</text>
</view>
</view>
</block>
</view>