微信小程序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)文章
這篇文章主要介紹了ES6 對(duì)象的新功能與解構(gòu)賦值介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
實(shí)現(xiàn)JavaScript中數(shù)據(jù)響應(yīng)的方法總結(jié)
JavaScript 數(shù)據(jù)響應(yīng)是一種重要的前端開發(fā)概念,是指在應(yīng)用程序中的數(shù)據(jù)發(fā)生變化時(shí),能夠自動(dòng)更新與這些數(shù)據(jù)相關(guān)的用戶界面（UI）部分的能力,本文我們來總結(jié)一下目前可以簡(jiǎn)單實(shí)現(xiàn) JavaScript 中的數(shù)據(jù)響應(yīng)的方法,需要的朋友可以參考下2023-09-09
js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
詳解如何使用JavaScript獲取自動(dòng)消失的聯(lián)想詞
前幾天在做數(shù)據(jù)分析時(shí),我嘗試獲取某網(wǎng)站上輸入搜索詞后的聯(lián)想詞,輸入搜索詞后會(huì)彈出一個(gè)顯示聯(lián)想詞的框,有趣的是,輸入框失去焦點(diǎn)后,聯(lián)想詞彈框就自動(dòng)消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動(dòng)消失的聯(lián)想詞,需要的朋友可以參考下2024-06-06
記一次webpack3升級(jí)webpack4的踩坑經(jīng)歷
這篇文章主要介紹了記一次webpack3升級(jí)webpack4的踩坑經(jīng)歷，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了微信小程序引入Vant組件庫(kù)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
Bootstrap每天必學(xué)之彈出框（Popover）插件
Bootstrap每天必學(xué)之彈出框（Popover）插件,彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充，如何實(shí)現(xiàn)請(qǐng)參考本文2016-04-04
本篇文章主要是對(duì)Script標(biāo)簽與訪問HTML頁面進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
簡(jiǎn)單寫了下，只測(cè)試了chrome，道理很簡(jiǎn)單，其他瀏覽器自行擴(kuò)充。2013-05-05
在JavaScript中，等號(hào)由雙等號(hào)(==)表示，當(dāng)且僅當(dāng)兩個(gè)運(yùn)算數(shù)相等時(shí)，它返回true。今天我們就來詳細(xì)探討下等號(hào)運(yùn)算符的問題，并附上等號(hào)運(yùn)算符和全等號(hào)運(yùn)算符的區(qū)別分析。2015-04-04