Maison > Applet WeChat > Développement de mini-programmes > Comment réduire la taille de l'icône dans le mini-programme WeChat

Comment réduire la taille de l'icône dans le mini-programme WeChat

angryTom
Libérer: 2020-03-23 09:55:22
original
10287 Les gens l'ont consulté

Comment réduire la taille de l'icône dans le mini-programme WeChat

Comment réduire la taille de l'icône dans le mini programme WeChat

L'icône dans le mini programme WeChat utilise le composant icône, et les valeurs d'attribut sont le type, la taille et la couleur. L'attribut size contrôle la taille de l'icône, il vous suffit de définir une valeur de taille plus petite.

Apprentissage recommandé : Développement de mini-programmes

Les paramètres des composants d'icônes sont les suivants :

属性名 类型 默认值 说明
type String   icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 icon的大小,单位px
color Color   icon的颜色,同css的color

Code de référence :

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>
Copier après la connexion

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;
    ]
  }
})
Copier après la connexion

3, rendus :

Comment réduire la taille de licône dans le mini-programme WeChat

Site Web PHP chinois, un grand nombre de Tutoriel de vidéos jquery , bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal