首頁 > 微信小程式 > 小程式開發 > 微信小程式中怎麼樣縮小圖標

微信小程式中怎麼樣縮小圖標

angryTom
發布: 2020-03-23 09:55:22
原創
10287 人瀏覽過

微信小程式中怎麼樣縮小圖標

微信小程式中怎麼樣縮小圖示   

微信小程式圖示使用icon元件,屬性值有type、size、color,控製圖標大小的是size屬性,想要縮小圖標,只需要將size的值設定小一點即可。

推薦學習:小程式開發

icon元件參數如下:

##類型預設值說明#String#icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear#sizeNumber 23icon的大小,單位px#colorColor icon的顏色,同css的color
屬性名稱

參考程式碼:


1、wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>


<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>
登入後複製

2、js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      &#39;red&#39;, &#39;orange&#39;, &#39;yellow&#39;, &#39;green&#39;, &#39;rgb(0,255,255)&#39;, &#39;blue&#39;, &#39;purple&#39;
    ],
    iconType: [
      &#39;success&#39;, &#39;success_no_circle&#39;, &#39;info&#39;, &#39;warn&#39;, &#39;waiting&#39;, &#39;cancel&#39;, &#39;download&#39;, &#39;search&#39;, &#39;clear&#39;
    ]
  }
})
登入後複製

3、效果圖:

微信小程式中怎麼樣縮小圖標

PHP中文網,大量jquery影片教學

,歡迎學習! ###

以上是微信小程式中怎麼樣縮小圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板