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

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

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

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

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

首先是目录结构：

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

.wxml：

{{item.word}}




  
    
    第一分类
  
  
    
    第二分类
  
  
    
    第三分类
  
  
    
    第四分类
  

.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个人博客小程序学习笔记目录下的内容。