1. 程式人生 > >微信小程式----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']
  },
})

引入圖示庫

方法

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>

其他

遊戲列表