微信小程序 wxapp内容组件 icon详细介绍
微信小程序 内容组件
相关文章:
微信小程序 wxapp内容组件 icon
微信小程序 wxapp内容组件 text
微信小程序 wxapp内容组件progress
icon
图标。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | Number | 23 | icon的大小,单位px |
color | Color | icon的颜色,同css的color |
示例:
<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="45"/> </block> </view> <view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="45" color="{{item}}"/> </block> </view>
Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconType: [ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle', 'cancel', 'search', 'clear' ] } })
icon
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序 wxapp内容组件 progress详细介绍
微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件 进度条:progress 进度条 属性名 类型 默认值 说明 percent Float 无 百分比0~100 showInfo Boolean false 在进度条右侧显示百分比 strokeWidth Number 6 进度条线的宽度,单位px color Color #09BB07 进度条颜色 active
-
微信小程序 wxapp画布 canvas详细介绍
微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String canvas组件的唯一标识符 binderror EventHandle 当发生错误时触发error事件,detail = { errMsg: 'something w
-
微信小程序 wxapp地图 map详解
微信小程序 wxapp地图 map: map 属性名 类型 默认值 说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 1 缩放级别 markers Array 标记点 covers Array 覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮
-
微信小程序 wxapp导航 navigator详解
微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名 类型 默认值 说明 url String 应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没
-
微信小程序 wxapp内容组件 text详细介绍
微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件:text 文本节点,支持转义符"\". 除了文本节点以外的其他节点都无法长按选中 示例: <view class="section section_gap"> <text>{{text}}</text> <view class="b
-
微信小程序 教程之wxapp视图容器 scroll-view
相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view scroll-view 可滚动视图区域. 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower
-
微信小程序 教程之wxapp视图容器 swiper
相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view 微信小程序视图容器:swiper 滑动面板 滑动面板 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的index interval Number 5000
-
微信小程序 wxapp视图容器 view详解
微信小程序 view 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green
-
微信小程序 教程之wxapp 视图容器 view
相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view View 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp"
-
微信小程序 wxapp内容组件 icon详细介绍
微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress icon 图标. 属性名 类型 默认值 说明 type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number 23 icon的大小,单位px color Col
-
微信小程序 实战实例开发流程详细介绍
前言: 微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享, 前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质.HTTPS.审核. 先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过.什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快. 至于为什么现在选择开发小程序,原因很简单,尝尝鲜! 学习
-
微信小程序 (七)数据绑定详细介绍
数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里先记录下 data.wxml <!--数据绑定使用对象---内容--> <view>{{message}}</view> <!--数据绑定使用对象---组件属性---需要在双引号之内--> <view id="item-{{id}}">组件属性</view&g
-
微信小程序 (六)模块化详细介绍
模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //获取时分秒 var hour = date.getH
-
微信小程序 搜索框组件代码实例
这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon>
-
微信小程序自定义tabBar组件开发详解
本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite
随机推荐
- Redis 事务与过期时间详细介绍
- jquery实现限制textarea输入字数的方法
- cmd dir结构树显示代码(列出目录文件)
- js实现瀑布流效果(自动生成新的内容)
- PHP 信号管理知识整理汇总
- C#可用于登录验证码的四位随机数生成方法
- 访问修饰符(C# 编程指南)
- 详解Android进程和线程
- CentOS Linux服务器安全设置
- NodeJs中的非阻塞方法介绍
- JavaScript实现的GBK、UTF8字符串实际长度计算函数
- 基于jquery自定义的漂亮单选按钮RadioButton
- jquery判断小数点两位和自动删除小数两位后的数字
- js几个不错的函数 $$()
- asp实现WEB打印代码大全
- 修改Android应用的样式的一些关键点解析
- JAVA中的静态代理、动态代理以及CGLIB动态代理总结
- 基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
- 浅析javascript函数表达式
- PHPExcel中文帮助手册|PHPExcel使用方法(分享)