zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信小程序中的小图标类型

微信程序 类型
2023-09-11 14:20:50 时间

 

<!--index.wxml-->

<view class="container">

  <view class="top_img">

    <swiper indicator-dots="true" autoplay="true" duration="{{duration}}" interval="{{interval}}">

      <block wx:for="{{img_urls}}">

        <swiper-item>

          <image src="{{item}}" style="width: 100%; height: 100%"></image>

        </swiper-item>

      </block>

    </swiper>

  </view>

  <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>

page 中的data数据:

//获取应用实例

var app = getApp()

Page({

  data: {

    iconSize: [20, 30, 40, 50, 60, 70],

    iconColor: [

      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

    ],

    iconType: [

      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

    ],

    img_urls: []