微信小程序学习笔记(四)——首页小程序实例(仿腾讯课堂首页)

效果

项目结构

index.wxml

wxml里很简单，核心东西都在index.wxss中。

<view class="body">

	<!-- 头部 -->
	<view class="head">
		<view class="head_bar active">推荐</view>
		<view class="head_bar">精品</view>
		<view class="head_bar">排行榜</view>
	</view>
	<!-- 中间内容 -->
	<view class="list-wrap">
		<scroll-view scroll-y="true" class="list">
			<view class="list-scroll">

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>

				<view class="card">
					<image src="../img/2.jpg" mode="widthFix"></image>
					<view class="introduction">星空之美</view>
					<view class="price">免费</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<!-- 底部 -->
	<view class="bottom">
		<view class="bottom_bar active">
			<image mode="widthFix" src="../img/home-active.png"></image>
			<view>首页</view>
		</view>
		<view class="bottom_bar">
			<image mode="widthFix" src="../img/search.png"></image>
			<view>搜索</view>
		</view>
		<view class="bottom_bar">
			<image mode="widthFix" src="../img/user.png"></image>
			<view>我的</view>
		</view>
	</view>
</view>

index.wxss

我个人觉得重要的地方都上了注释；不得不说flex布局用着真的爽。

.body{
  /* flex布局 */
  display: flex;
  /* 垂直方向为主轴 */
  flex-direction: column;
  /* vh是将屏幕高度分成一百份，100vh就是铺满屏幕高度 */
  height: 100vh;
}
.head,.bottom{
  display: flex;
  /* flex布局 将子元素两端对齐，其余等距排开 */
  justify-content: space-between;
  background-color: #ddd;
}
.head_bar{
  font-size: 18px;
  /* 行高 */
  line-height: 1;
  /* 内间距 */
  padding: 5px;
}
.list-wrap{
  flex-grow: 1;
  position: relative;
}
.list{
  
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}
.list-scroll{
  
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
  /* 主轴起点对齐 */
  align-content: flex-start;
  justify-content: space-between;
  margin-left: 2vw;
  margin-right: 2vw;
}
.card{
  /* 与vh相似，将手机宽度分成100vw，100vw代表铺满手机宽度 */
  width:47vw;
  /* margin: 10px; */
  margin-top:10px;
}
.card image{
  width: 100%;
  /* 圆角 */
  border-radius: 5px;
}
.price, .active{
  color:#23b8ff
}
.bottom{
  display: flex;
  justify-content: space-between;
}
.bottom_bar{
  text-align: center;
  font-size: 14px;
  width: 40px;
  line-height: 1;
  padding: 5px;
}
.bottom_bar image{
  width: 28px;
}

项目地址

CSDN下载