想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单:
首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址:
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个人博客小程序学习笔记目录下的内容。