微信小程序图标 icon组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看)
图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | |
size | number/string | 23 | 否 | icon的大小 | 1.0.0 |
color | string | 否 | icon的颜色,同css的color | 1.0.0 |
示例代码
在开发者工具中预览效果
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']}
})
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
.intro {margin: 30px;text-align: center;
}
运行效果:
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板
微信小程序图标 icon组件相关推荐
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 微信小程序授权登录 组件的封装
微信小程序授权登录 组件的封装 新建components文件 写wxml文件 wxss部分 js部分 json引用 页面使用 页面js 授权登录 流程如下: 因为多个页面功能需要登录状态 所以做了个组 ...
- 微信小程序上传组件(可同时长传图片+视频)
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
- 微信小程序自定义标签组件component封装、组件生命周期,组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信 本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
- 微信小程序用vant组件制作通讯录
微信小程序用vant组件制作通讯录 效果图: 代码如下: .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> ...
- 微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- 【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性 共同的属性 时间选择器time 参考 [微信小程序]选择器组件picker picke ...
- 微信小程序的父子组件传值
微信小程序的父子组件传值 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
最新文章
- SQLite API
- python插件安装包_python 离线安装插件包
- 多项式加法c语言数组解,急!!!!c语言:求n次多项式的加法和乘法
- 【Spring MVC 之应用篇】3_SpringMVC常见注解
- Linux Tomcat 安装
- 春招我借这份PDF的复习思路,论程序员成长的正确姿势
- 百度贴吧发帖软件_贴吧自动发帖软件
- QT [007] QT UI 的控件操控问题 - 如何操控多嵌套的UI控件
- MYSQL 无重复插入数据更新语法 sql一句话使insert时若主键重复则更新
- eureka 客户端服务启动了又失败了_SpringCloud-Eureka(2)
- 计算机组成原理白中英ppt,计算机组成原理(本全)白中英.ppt
- 企业新闻媒体资源有哪些类型?从哪里找?
- 小游戏--三子棋——N子棋(实现)
- 对 Linux 初级、中级、高级用户非常有用的 60 个命令(转)
- 六级(2020/12-3) Text 1
- bzero与memset
- 关于Redis的数据清理
- Web Services 应用开发学习笔记(三):XML模式定义
- 收藏 | 什么是功率因数?
- 重庆的小面50强[转自经典重庆]