微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现

想要实现一个顶部是几篇纯文字的推荐文章，推荐文章下面是四个分类图标，具体实现出来是这个样子的，比较简单：

首先先来找一下素材，这几个图标是我在阿里巴巴图标库下载的，这里是下载地址：

http://www.iconfont.cn/collections/detail?cid=29

里面有很多不错的矢量图，可以根据自己的需求下载，下面是实现的代码。

首先是目录结构：

然后是实现代码，只有.wxml和.js、.wxss文件

.wxml：

<!--pages/list/list.wxml-->
<!--顶部文章推荐-->
<block wx:for="{{recoTitle}}">
<view class='recoTitle'><navigator url='{{item.line}}'>{{item.word}}</navigator></view>
</block>

<!--分类图标-->
<view class='allKinds'>
  <view class='kinds'>
    <image src="/images/listClass/class1.png"></image>
    <view class='kind'>第一分类</view>
  </view>
  <view class='kinds'>
    <image src="/images/listClass/class2.png"></image>
    <view class='kind'>第二分类</view>
  </view>
  <view class='kinds'>
    <image src="/images/listClass/class3.png"></image>
    <view class='kind'>第三分类</view>
  </view>
  <view class='kinds'>
    <image src="/images/listClass/class4.png"></image>
    <view class='kind'>第四分类</view>
  </view>
</view>

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    recoTitle:[
      { word: "这里是第一个推荐文章1 ", line: "#" },
      { word: "这里是推荐文章2 ", line: "#" },
      { word: "这里是三推荐文章3 ", line: "#" },
      { word: "这里是第四推荐文章4 ", line: "#" }
    ]

  }
})

.wxss

.recoTitle{
  font-size: 14px;
  text-align: center;
  text-decoration: underline;
}

.kind {
  font-size: 14px;
  text-align: center;
}

.kinds {
  width:25%;
  height:100rpx;
}

.kinds image {
  margin-left: 45rpx;
  width:50%;
  height:100%;
}

.allKinds {
  margin-top: 15rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

往期的基础学习课程，可以查看我的csdn个人博客小程序学习笔记目录下的内容。