一、构造首页的页面结构

首先，我们要构造小程序的首页内容的页面（index.wxml文件），代码如下：

<van-tabs  ellipsis="{{false}}">
  <van-tab  wx:for="{{categorys}}" title="{{item.name}}">
    <view class="box-list">
      <view class="item column">
        <image class="cover" src="https://bmob-cdn-31082.bmobpay.com/2022/12/14/4dcbbe6e407159fa800c2aabe549a01f.jpg"></image>
        <view>蓝绿色清新商务PPT图表合集</view>
        <view class="row-btw">
          <view>
            <text class="t1">免费</text>
          </view>
          <view>
            <text class="t2">150下载</text>
          </view>
        </view>
      </view>
    </view>
  </van-tab>
</van-tabs>

这里有一个小技巧需要注意：为了让样式更可控，我们可以在text、image这种最基本的组件外围包裹一层view组件。

二、设置首页的样式

打开index.wxss文件，写入下面的样式代码（这里不对样式进行详细解释，大家自行了解）：

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.column {
  display: flex;
  flex-direction: column;
  position: relative;
}
.box-list{
  min-height: 100vh;
  padding:24rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.box-list .item {
  display: inline-block;
  width: calc(50vw - 38rpx);
  height: 334rpx;
  font-size: 28rpx;
  margin-top: 0;
  margin-bottom: 32rpx;
  margin-left: 24rpx;
}
.item .cover{
  width: 100%;
  height: 210rpx;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.row-btw {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.item .t1 {
  color: #FF0000;
}

.item .t2 {
  color: rgba(154, 154, 154, 1);
  font-size: 24rpx;
}

这里大家需要注意的是，.box-list .item 这个的样式里面，有一句：width: calc(50vw - 38rpx); 表示我们希望宽度是一半的宽度（50vw）减去38rpx

三、获取和呈现列表数据

1、设计表结构和填充数据

我们先根据UI，设计表结构如下（表名ppt）：

名称	数据类型	说明
categoryname	string	分类名称
cover	string	封面图片地址
title	string	标题
free	string	免费或者付费
download	number	下载次数
pics	string	内容页里面的图片地址，多个图片用 , 分隔开
url	string	PPT的下载地址

设计好表结构之后，我们再根据自己的实际情况，填充对应的内容。为了演示的方便，这里添加了四条数据，如下：

2、获取分类列表数据

我们分析一下这个小程序，首先我们获取到的是分类信息，然后才能根据分类信息去拉取分类里面的信息。

修改index.js代码，添加多一个getDetail方法如下：

  getDetail(name) {
    const query = wx.Bmob.Query('ppt')
    query.equalTo('categoryname','==',name)
    query.find().then(res=>{
      this.setData({
        details:res
      })
    })
  },

然后修改 getCategory方法，在获取到分类信息之后，立即去获取第一个分类下面的列表数据，代码如下：

  getCategory(){
    const query = wx.Bmob.Query('category')
    query.find().then(res=>{
      this.setData({
        categorys:res
      })
      if(res){
        this.getDetail(res[0].name)
      }
    })
  },

3、呈现分类列表数据

现在，我们再修改index.wxml页面文件，把数据呈现出来，代码如下：

<van-tabs  ellipsis="{{false}}">
  <van-tab  wx:for="{{categorys}}" title="{{item.name}}">
    <view class="box-list">
      <view class="item column"  wx:for="{{details}}">
        <image class="cover" src="{{item.cover}}"></image>
        <view>{{item.title}}</view>
        <view class="row-btw">
          <view>
            <text class="t1">{{item.free}}</text>
          </view>
          <view>
            <text class="t2">{{item.download}}下载</text>
          </view>
        </view>
      </view>
    </view>
  </van-tab>
</van-tabs>

如果一切正常，我们可以预览看到如下的界面效果：

四、实现分类切换

到目前为止，我们选择分类信息，里面的内容是不会变化的，因为我们没有给tabs实现切换的事件。

下面，我们先添加一个tabs切换的事件，在index.js中添加如下代码：

  onChange(e){
    const title = e.detail.title
    this.getDetail(title)
  },

然后，我们再修改index.wxml文件的van-tabs，添加一个onChange的事件绑定，代码如下：

<van-tabs  ellipsis="{{false}}" bind:change="onChange">

预览的时候，你就会发现，切换tab的代码就已经写好了。

五、源码下载

源码下载地址：gitee.com/zhang-ming-…

从零开始三天学会小程序开发中级篇（二）