微信小程序icon組件使用詳解
更新時(shí)間：2018年01月31日 10:04:30 作者：Rattenking
這篇文章主要為大家詳細(xì)介紹了微信小程序icon組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序icon組件的實(shí)現(xiàn)，具體如下
原生的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']
},
})
引入圖標(biāo)庫(kù)
方法
微信小程序—-引入外部字體庫(kù)iconfont的圖標(biāo)
WXML
<view class="icon-group">微信小程序外部庫(kù)引入圖標(biāo)</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下載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解JavaScript系列(1) 編寫(xiě)高質(zhì)量JavaScript代碼的基本要點(diǎn)
才華橫溢的Stoyan Stefanov，在他寫(xiě)的由O’Reilly初版的新書(shū)《JavaScript Patterns》(JavaScript模式)中，我想要是為我們的讀者貢獻(xiàn)其摘要，那會(huì)是件很美妙的事情2012-01-01
本文主要介紹了簡(jiǎn)單的漸變輪播插件，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了一文搞懂Map與Set的用法和區(qū)別,文章開(kāi)頭給大家介紹了map和set的基本概念，了解這些基礎(chǔ)知識(shí)能夠幫助我們更好的使用，需要的朋友可以參考下2022-06-06
JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法,主要思路是通過(guò)CSS Media Queries改變一個(gè)類(lèi)的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05
JS新包管理工具yarn和npm的對(duì)比與使用入門(mén)
在2016年10月11日f(shuō)acebook 公開(kāi)了新的javascript包管理工具 yarn, 用來(lái)替代目前被廣泛使用的npm(nodejs 自帶的包管理工具)，本文將介紹yarn工具帶來(lái)的優(yōu)點(diǎn)和使用入門(mén)，以及對(duì)比npm解決了什么問(wèn)題，帶來(lái)哪些便利。有需要的朋友們下面來(lái)一起看看吧。2016-12-12
這篇文章主要介紹了json格式數(shù)據(jù)的添加，刪除及排序方法,結(jié)合實(shí)例形式分析了針對(duì)一維數(shù)組與二維數(shù)組的json格式數(shù)據(jù)進(jìn)行增加、刪除與排序的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記二：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
在javascript中如何得到中英文混合字符串的長(zhǎng)度
本文為大家介紹下Javascript中如何得到中英文混合字符串的長(zhǎng)度，下面有個(gè)不錯(cuò)的教程，感興趣的朋友可以參考下2014-01-01
JavaScript隨機(jī)數(shù)的組合問(wèn)題案例分析
這篇文章主要介紹了JavaScript隨機(jī)數(shù)的組合問(wèn)題,結(jié)合具體案例形式分析了JavaScript隨機(jī)數(shù)的組合問(wèn)題相關(guān)算法原理、實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05