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

效果

项目结构

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"></