【一步步学小程序】2.列表展示

我们上一节已经创建了一个可以点击切换的tabbar。这节我们开始正式敲代码，在首页上展示一个可以上下滚动的课程列表：

首先打开上一节的pages/home/homeMain/homeMain.wxml文件，布局相关代码都会在此文件中，小程序的布局方式类似Html标签，也有点类似Android中的xml布局文件或SwiftUI。IDE默认已经帮我们创建了一行布局代码：

<text>pages/subscribe/homeMain/homeMain.wxml</text>

对应就是属于一行文字（text）：pages/subscribe/homeMain/homeMain.wxml
运行效果如下图：

我们将其删除，并先创建第一个课程单元格视图：

<view class="container">

<view class="course_main_view">
  <view class="course_main_item_view">
    <image class="course_cover_image" src="/images/course.png"></image>
    <text class="course_title">如何成为压力管理的高手</text>
    <text class="course_teacher">指导老师：克里斯朵夫 英国牛津大学客座教授</text>
    <view class="course_address_view">
      <image class="course_address_image" src="/images/home/location.png"></image>
      <view class="course_address">广州｜2020.05.05-05.15</view>
    </view>
  </view>
</view>

</view>

Control+S保存修改后的wxml后，小程序会被重新编译运行，效果如下：

其中/images/course.png和/images/location.png两张图片，需要我们打开images文件， 并将对应图片复制进去，如图右击images文件夹，选择硬盘打开，可以快速打开：

最外层view标签，我们通过class=“”设置其标签名为container，container为整个页面的容器。

我们目前只是把对应的控件显示到屏幕上，现在看的布局却还是乱的。我们打开pages/home/homeMain/homeMain.wxss文件，添加如下布局样式代码，语法基本与css是一致的：

/* pages/subscribe/subscribeInvestigate/subscribeInvestigate.wxss */
.course_main_view{
  width: 686rpx;
  height: 464rpx;
  margin-left: 14rpx;
  margin-right: 14rpx;
  margin-top: 30rpx;
  align-content: center;
  justify-content: center;
  display: inline-block;
  border-radius: 16rpx;
  background: white;
}

.course_main_item_view{
  display: flex;
  flex-direction: column;
}

.course_cover_image{
  width: 686rpx;
  height: 314rpx;
  background-color: #cccccc;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.course_title{
  margin-left: 16rpx;
  margin-top: 10rpx;
  line-height: 40rpx;
  text-align: left;
  font-size: 28rpx;
  color: #333333;
}

.course_teacher{
  margin-left: 16rpx;
  line-height: 40rpx;
  width: 500rpx;
  text-align: left;
  font-size: 20rpx;
  color: #666666;
}

.course_address_view{
  margin-left: 16rpx;
  height: 40rpx;
  width: 500rpx;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.course_address_image{
  margin-top: 10rpx;
  width: 20rpx;
  height: 20rpx;
}

.course_address{
  margin-left: 10rpx;
  line-height: 40rpx;
  text-align: left;
  font-size: 20rpx;
  color: #999999;
}

其中container容器的样式，系统在app.wxss已经设置其默认样式。control+s（Mac是command+s）保存后，运行效果如下：

此时我们列表只有一个单元格，我们可以简单地用一个for循环，显示3个课程单元格，这样看起来才是个列表。打开pages/subscribe/homeMain/homeMain.wxml，在class为course_main_view的view中添加wx:for="{{3}}"，表示这个view需要循环3次，即：

<view class="course_main_view">

改为

<view class="course_main_view" wx:for="{{3}}">

此时保存wxml文件，IDE自动编译运行后效果如图：

此时虽然完成了一个可以上下滚动的列表，但是数据是固定的并且都是一样的。下一节将介绍怎么将json数据映射到列表中，使其成为一个动态的列表，并将单元格封装成组件（component）。