【互助系统】开发日记-主页

目录

一. 拆解

二. 轮播图

三. 消息浮窗（网上有全部代码）

四. 九宫格

---

因为是我们一个组共同设计的，为了尊重别的组员的劳动成果，所以不会写的很详细，只放学到了的部分。

一. 拆解

在设计样例图中，从上到下一共有几个部分：

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>