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

 更新时间:2018年01月31日 10:04:30   作者:Rattenking  
这篇文章主要为大家详细介绍了微信小程序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']
 },
})

引入图标库

方法

微信小程序—-引入外部字体库iconfont的图标

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下载

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

相关文章

  • 使用JS获取页面上的所有标签

    使用JS获取页面上的所有标签

    这篇文章主要介绍了使用JS获取页面上的所有标签 ,需要的朋友可以参考下
    2018-10-10
  • 浅谈JS运算符&&和|| 及其优先级

    浅谈JS运算符&&和|| 及其优先级

    下面小编就为大家带来一篇浅谈JS运算符&&和|| 及其优先级。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下
    2016-04-04
  • xmlplus组件设计系列之列表(4)

    xmlplus组件设计系列之列表(4)

    xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS实用的带停顿的逐行文本循环滚动效果实例

    JS实用的带停顿的逐行文本循环滚动效果实例

    下面小编就为大家带来一篇JS实用的带停顿的逐行文本循环滚动效果实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS实现的适合做faq或menu滑动效果示例

    JS实现的适合做faq或menu滑动效果示例

    这篇文章主要介绍了JS实现的适合做faq或menu滑动效果,结合实例形式分析了基于JS实现的页面元素滑动渐变效果的相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • 嵌入式iframe子页面与父页面js通信的方法

    嵌入式iframe子页面与父页面js通信的方法

    这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • Es6 Generator函数详细解析

    Es6 Generator函数详细解析

    Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。这篇文章给大家介绍Es6 Generator函数的相关知识,感兴趣的朋友一起看看吧
    2018-02-02
  • 获取select元素被选中的文本内容的js代码

    获取select元素被选中的文本内容的js代码

    获取select元素被选中的文本内容的方法有很多,本文为大家介绍下使用javascript来轻松实现下
    2014-01-01
  • javascript实现随时变化着的背景颜色

    javascript实现随时变化着的背景颜色

    这篇文章主要介绍了javascript实现随时变化着的背景颜色的方法,非常的简单实用,有需要的小伙伴可以直接拿走。
    2015-04-04

最新评论