WeChatミニプログラムでアイコンのサイズを小さくする方法-ミニプログラム開発-php.cn

WeChatミニプログラムでアイコンのサイズを小さくする方法

angryTom

リリース： 2020-03-23 09:55:22

オリジナル

10274 人が閲覧しました

WeChatミニプログラムでアイコンのサイズを小さくする方法

WeChat ミニプログラムのアイコンサイズを小さくする方法

WeChat ミニプログラムのアイコンは、アイコンコンポーネントと属性を使用します。値は type、size、color です。size 属性はアイコンのサイズを制御します。アイコンを縮小したい場合は、size 値を小さく設定するだけです。

推奨学習: 小規模プログラム開発

アイコンコンポーネントのパラメーターは次のとおりです:

##typeStringアイコンの種類、有効な値: success、success_no_circle、info、warn、waiting、cancel、download、search、clearsizeNumber 23pxcolorColor ## のアイコンのサイズ## 参照コード:

属性名	Type	デフォルト値	説明


		#icon の色は css の色と同じです

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 中国語 Web サイト、多数の WeChatミニプログラムでアイコンのサイズを小さくする方法 jquery ビデオチュートリアル