微信小程序学习day01

 

目标：

1、实现轮播图

2、实现首页九宫布局

3、实现图片布局

4、实现tabbar

轮播图实现：

<!--轮播图-->
<swiper indicator-dots circular autoplay interval="3000" indicator-color="#fff">
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.path}}" ></image>
  </swiper-item>
</swiper>

indicator-dots：显示轮播图圆点

circular：轮播图环绕展示

autoplay：自动展示、

interval设置轮播时间

indicator-color：设置圆点颜色

样式：设置轮播图高度，设置轮播图图片宽高

swiper {

  height: 350rpx;

}

swiper image{

  height: 100%;

  width: 100%;

}

 九宫格实现：

<!--九宮格-->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.coverImg}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

样式：

/**九宫格*/

.grid-list{

  display: flex;/**弹性布局*/

  flex-wrap: wrap;/**让弹性盒元素在必要的时候拆行（换行）*/

  border-left: 1rpx solid #efefef; /**添加九宫格左侧 边框*/

  border-top: 1rpx solid #efefef;/**添加九宫格左顶部边框*/

}

.grid-item{

  width: 33.33%;  // 设置一行为3个按钮，各站三分之一

  height: 190rpx; // 各个元素高度

  display: flex;  // 弹性布局

  flex-direction: column;  // 设置主轴方向 横轴

  align-items: center;  /**设置侧轴上的子元素排列方式 垂直*/

  justify-content: center;  /**设置主轴上的子元素排列方式 上下*/

  border-right: 1rpx solid #efefef;  // 设置各个元素右边框

  border-bottom: 1rpx solid #efefef;  // 设置各个元素低部边框

  box-sizing: border-box; /**元素的总高度和宽度包含内边距和边框(padding 与 border) :*/

}

实现图片布局：

<!--图片区-->
<view class="image-box">
  <image src="/images/hunsha-1.jpg" mode="widthFix"></image>
  <image src="/images/hunsha-3.jpg" mode="widthFix"></image>
</view>

样式：

.image-box{

  display: flex;  // 弹性布局

  padding: 20rpx 10rpx 0rpx 0rpx; /**定义元素边框与元素内容之间的空间  上、右、下、左*/

  justify-content: space-around;  // 均匀排列每个元素  每个元素周围分配相同的空间

}

.image-box image{

  width: 45%;

  border-radius: 20rpx;

}

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

实现tabbar:

直接在app.json中添加：最多5个，最少2个

"tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/icon/home.png",
      "selectedIconPath": "/images/icon/home-select.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/icon/message.png",
      "selectedIconPath": "/images/icon/message-select.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "我的",
      "iconPath": "/images/icon/contact.png",
      "selectedIconPath": "/images/icon/contact-select.png"
    }
  ]
},