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

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

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

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

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

自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习笔记01：微信小程序概述
文章目录零.学习目标一.小程序的历史二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序三.小程序与HTML5和APP比较 ...
微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
微信小程序学习笔记（4）
写在前面: 本文仅用于记录自己的学习经过和转载一些资料本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成,vscode仅用于编译代码.某些功能如即时模拟,实际上要使用微信官方工具 ...

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

首先是目录结构：

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

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

最新文章

热门文章