微信小程序首页开发实战

1.flex布局

1.1语法：display：flex(父元素上装载)

1.2理解常用属性，flex-direction\flex-grow\flex-wrap\align-content\justify-content\align-item

2scroll-view的使用，ps:scroll-view不支持flex

首页人物将页面分成三个大盒子，头部(head)、card、尾部（bottom）;头部的搜索框设计有待完善（搜索框的文字和放大镜的icon不在一个水平线上）；
固定头部和尾部的方式和老师方法不一样，老师用的是scroll-view+相对位置偏移，我最初用的是将头部和尾部的position设置成fixed,即相对于视图的位置

如图所示：

wxml:

<view class="body">
  <view class="guide">
    <image src="../../img/icon/柴犬.png" mode="widthFix"></image>
    <view class="search-container">
      <image src="../../img/icon/search.png" mode="widthFix"></image>
      <input
      placeholder="请输入老师，机构，课程"
      bindinput="onInput"
      value="{{searchValue}}"
    />
    </view>
  </view>
  <view class="list-wrap">
    <scroll-view  scroll-y="true" class="list">
      <view class="list-scroll-view">
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
        <view class="course-card">
          <view>
            <image src="../../img/cover.jpg" mode="widthFix"></image>
          </view>
          <view>人人都会小程序</view>
          <view class="price">免费</view>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- <view class="widthtail"> -->
    <view class="display">
      <view>
        <image src="../../img/icon/首页.png" mode="widthFix"></image>
        <view>首页</view>
      </view>
      <view>
        <image src="../../img/icon/课程表.png" mode="widthFix"></image>
        <view>课程表</view>
      </view>
    <view>
      <image src="../../img/icon/店铺.png" mode="widthFix"></image>
      <view>商城</view>
    </view>
    <view>
      <image src="../../img/icon/个人中心.png" mode="widthFix"></image>
      <view>我的</view>
    </view> 
  </view>

  <!-- </view> -->
</view>

wxss:

.guide{
  display:flex;
}
.search-container{
  display:flex;
  /* padding:8px; */
  background:#f8f8f8;
  width:100%;
  text-align:center;
  line-height: 1;
}
.search-container image{
  width:16px;
}
.guide image{
  width:30px;
  padding:8px;
}
.course-card{
  width:47vw; /**47*2=94**/
  margin-left:2vw;
  margin-right:1vw;
  margin-top:20px;
  margin-bottom:10px;
  /* margin:10px; */
  /* padding:5px; */
}

.course-card image{
  width:100%;
  border-radius: 5px;
}
.body{
  display:flex;
  flex-direction: column;
  height:100vh;
}
.list-wrap{
  flex-grow:1;
  position:relative;
}
.list{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;

} 
.list-scroll-view{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  justify-content: space-between;
}
.price{
  color:#0000ff
}

.head,.tail{
  width:100%;
  background-color: #ddd;
}
/* .headPosition{
  position:fixed;
  right:0;
  top:0;

}
.tailPosition{
  position:fixed;
  right:0;
  bottom:0;
} */
/* .widthtail{
  height:7%;
  width:100%;
  background-color: #ddd;
} */
.display{
  /* height:50%; */
  display:flex;
  flex-direction: row;
  align-content:flex-start;
  justify-content: space-between;
  padding:20px;
  text-align:center;
  font-size:14px;
  line-height:1;
  padding:20px;

}
.display image{
  width:38px;
  /* margin-left:20px;
  margin-right:20px; */

}

效果图：