微信小程序----组件之icon

来源：互联网发布：淘宝怎么帮朋友代付款编辑：程序博客网时间：2024/05/16 06:43

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

根据文档写代码

效果图：

项目结构：

核心代码：

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

index.wxss

.group{background: yellow;height: 100px;}

index.js

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'    ]  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }})

源码下载：

http://download.csdn.net/download/zhaihaohao1/9962142

阅读全文

0 0