微信小程序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 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
JS监听Esc 键触发事键
Apr 14 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
简单谈谈json跨域
2016/03/13 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Python变量赋值的秘密分享
2018/04/03 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python面向对象进阶学习
2019/05/21 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python @property装饰器原理解析
2020/01/22 Python
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
初中校园之声广播稿
2014/01/15 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
职位说明书范文
2014/05/07 职场文书
篮球比赛口号
2014/06/10 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
大学生实习介绍信
2015/05/05 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS