脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序icon组件

微信小程序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下载

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

您可能感兴趣的文章:

相关文章

  • ES6 对象的新功能与解构赋值介绍

    ES6 对象的新功能与解构赋值介绍

    这篇文章主要介绍了ES6 对象的新功能与解构赋值介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 实现JavaScript中数据响应的方法总结

    实现JavaScript中数据响应的方法总结

    JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下
    2023-09-09
  • js获取两个数组对象的差集实现方法

    js获取两个数组对象的差集实现方法

    这篇文章主要为大家介绍了js获取两个数组对象的差集实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 详解如何使用JavaScript获取自动消失的联想词

    详解如何使用JavaScript获取自动消失的联想词

    前几天在做数据分析时,我尝试获取某网站上输入搜索词后的联想词,输入搜索词后会弹出一个显示联想词的框,有趣的是,输入框失去焦点后,联想词弹框就自动消失了,这种情况下该怎么办呢,所以本文给大家介绍了如何使用JavaScript获取自动消失的联想词,需要的朋友可以参考下
    2024-06-06
  • 记一次webpack3升级webpack4的踩坑经历

    记一次webpack3升级webpack4的踩坑经历

    这篇文章主要介绍了记一次webpack3升级webpack4的踩坑经历，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    这篇文章主要介绍了微信小程序引入Vant组件库过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件,弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充，如何实现请参考本文
    2016-04-04
  • Script标签与访问HTML页面详解

    Script标签与访问HTML页面详解

    本篇文章主要是对Script标签与访问HTML页面进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • javascript检测页面是否缩放的小例子

    javascript检测页面是否缩放的小例子

    简单写了下，只测试了chrome，道理很简单，其他浏览器自行扩充。
    2013-05-05
  • javascript等号运算符使用详解

    javascript等号运算符使用详解

    在JavaScript中，等号由双等号(==)表示，当且仅当两个运算数相等时，它返回true。今天我们就来详细探讨下等号运算符的问题，并附上等号运算符和全等号运算符的区别分析。
    2015-04-04

最新评论