How to reduce the icon size in WeChat mini program

angryTom
Release: 2020-03-23 09:55:22
Original
10236 people have browsed it

How to reduce the icon size in WeChat mini program

How to reduce the icon size in the WeChat mini program

The icon in the WeChat mini program uses the icon component, and the attribute values ​​​​are type, size, and color. The size attribute controls the size of the icon. If you want to shrink the icon, you only need to set the size value smaller.

Recommended learning: Small program development

The icon component parameters are as follows:

##typeStringType of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizeNumber 23The size of the icon in pxcolorColor## Reference code:
Attribute name Type Default value Description
## The color of #icon is the same as the color of 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>
Copy after login

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;
    ]
  }
})
Copy after login
3. Rendering:

PHP Chinese website, a large number of How to reduce the icon size in WeChat mini programjquery video tutorials

, welcome to learn!

The above is the detailed content of How to reduce the icon size in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template