微信小程序icon组件使用详解


Posted in Javascript onJanuary 31, 2018

微信小程序icon组件的实现,具体如下

微信小程序icon组件使用详解

原生的icon组件的属性

微信小程序icon组件使用详解

WXML

<view class="icon-group">
 <icon wx:for="{{typeList}}" type="{{item}}" size="40"></icon>
</view>

JS

Page({
 data: {
 typeList: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']
 },
})

引入图标库

方法

WXML

<view class="icon-group">微信小程序外部库引入图标</view>
<view class="icon-group">
 <icon class="iconfont icon-zhiding"></icon>
 <icon class="iconfont icon-zuojiantou"></icon>
 <icon class="iconfont icon-youjiantou"></icon>
 <icon class="iconfont icon-shangjiantou"></icon>
 <icon class="iconfont icon-xiajiantou1"></icon>
 <icon class="iconfont icon-xiajiantou"></icon>
</view>
<view class="icon-group">
 <icon class="iconfont icon-gengduotianchong"></icon>
 <icon class="iconfont icon-erweima"></icon>
 <icon class="iconfont icon-fenleiorguangchangorqita"></icon>
 <icon class="iconfont icon-dibiao"></icon>
 <icon class="iconfont icon-bangzhu"></icon>
 <icon class="iconfont icon-xinfeng"></icon>
</view> 
<view class="icon-group">
 <icon class="iconfont icon-duihuaxinxi"></icon>
 <icon class="iconfont icon-sousuo"></icon>
 <icon class="iconfont icon-shouye"></icon>
 <icon class="iconfont icon-shezhi"></icon>
 <icon class="iconfont icon-shanchu"></icon>
 <icon class="iconfont icon-dianhua"></icon>
</view>

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
js自定义事件代码说明
Jan 31 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 #Javascript
微信小程序页面生命周期详解
Jan 31 #Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 #Javascript
You might like
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
极简的Python入门指引
2015/04/01 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python 变量类型详解
2018/10/10 Python
django解决跨域请求的问题详解
2019/01/20 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
行政助理求职自荐信
2013/10/26 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
20年同学聚会感言
2014/02/03 职场文书
解除合同协议书
2014/04/17 职场文书
工作散漫检讨书
2014/09/16 职场文书
家庭困难证明
2014/10/12 职场文书
工人先进事迹材料
2014/12/26 职场文书
村党组织公开承诺书
2015/04/30 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang