微信小程序学习笔记七简单文章推荐列表和分类图标的实现-小程序种类-小程序界面开发-即速应用

微信小程序学习笔记七简单文章推荐列表和分类图标的实现-小程序种类-小程序界面开发

浏览量：1742 时间：2020-04-06 来源：胡晓天o0

1.
想要实现一个顶部是几篇纯文字的推荐文章，推荐文章下面是四个分类图标，具体实现出来是这个样子的，比较简单：
2.
首先先来找一下素材，这几个图标是我在阿里巴巴图标库下载的，这里是下载地址：
3.
http://www.iconfont.cn/collections/detail?cid29
4.
里面有很多不错的矢量图，可以根据自己的需求下载，下面是实现的代码。
首先是目录结构：然后是实现代码，只有.wxml和.js、.wxss文件5.
.wxml：
!--pages/list/list.wxml--!--顶部文章推荐--blockwx:for"{{recoTitle}}"viewclass'recoTitle'navigatorurl'{{item.line}}'{{item.word}}/navigator/view/block!--分类图标--viewclass'allKinds'viewclass'kinds'imagesrc"/images/listClass/class1.png"/imageviewclass'kind'第一分类/view/viewviewclass'kinds'imagesrc"/images/listClass/class2.png"/imageviewclass'kind'第二分类/view/viewviewclass'kinds'imagesrc"/images/listClass/class3.png"/imageviewclass'kind'第三分类/view/viewviewclass'kinds'imagesrc"/images/listClass/class4.png"/imageviewclass'kind'第四分类/view/view/view6.
.js
Page({/***页面的初始数据*/data:{recoTitle:[{word:"这里是第一个推荐文章1",line:"#"},{word:"这里是推荐文章2",line:"#"},{word:"这里是三推荐文章3",line:"#"},{word:"这里是第四推荐文章4",line:"#"}]}})7.
.wxss
.recoTitle{font-size:14px;text-align:center;text-decoration:underline;}.kind{font-size:14px;text-align:center;}.kinds{width:25%;height:100rpx;}.kindsimage{margin-left:45rpx;width:50%;height:100%;}.allKinds{margin-top:15rpx;width:100%;display:flex;flex-wrap:wrap;}8.
往期的基础学习课程，可以查看我的csdn个人博客小程序学习笔记目录下的内容。