微信小程序----icon组件

来源：互联网发布：淘宝删除差评给子账号编辑：程序博客网时间：2024/05/29 17:52

效果图

这里写图片描述

原生的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>

更多微信小程序实例

阅读全文

'); })();