微信小程序中实现图标缩小的有效方式探讨

why 391 2024-07-23

微信小程序中怎么样缩小图标

微信小程序中怎么样缩小图标    

微信小程序中图标使用icon组件，属性值有type、size、color，控制图标大小的是size属性，想要缩小图标，只需要将size的值设置小一点即可。

icon组件参数如下：

属性名类型默认值说明
typeString
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizeNumber23icon的大小，单位px
colorColor
icon的颜色，同css的color

参考代码：

1、wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<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

1

2

3

4

5

6

7

8

9

10

11

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、效果图：

image.png


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 代码
上一篇:微信小程序里实现图片居中的方法详细解读
下一篇:微信小程序中实现无缝轮播的操作要点解析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~