第四篇、微信小程序-icon组件

属性:

效果图:

test.wxml

<!--成功图标-->
<icon type="success" size="40"/>
<!--安全成功标志图标-->
<icon type="safe_success" size="40"/>
<!--提示信息图标-->
<icon type="info" size="40"/>
<!--带圆的信息提示图标-->
<icon type="info_circle" size="40"/>
<!--不带圆的成功图标-->
<icon type="success_no_circle" size="40"/>
<!--带圆的成功图标-->
<icon type="success_circle" size="40"/>
<!--警告图标-->
<icon type="warn" size="40"/>
<!--带圆的等待图标-->
<icon type="waiting_circle" size="40"/>
<!--等待图标-->
<icon type="waiting" size="40"/>
<!--下载图标-->
<icon type="download" size="40"/>
<!--取消图标-->
<icon type="cancel" size="40"/>
<!--清除图标-->
<icon type="clear" size="40"/>
<!--成功图标集合-->
<View style="margin-top:30px;">
    <icon type="success" size="30" color="green"/>
    <icon type="success" size="40" color="blue"/>
    <icon type="success" size="50" color="red"/>
</View>
<!--取消图标集合-->
<View style="margin-top:30px;">
    <icon type="cancel" size="30" color="green"/>
    <icon type="cancel" size="40" color="blue"/>
    <icon type="cancel" size="50" color="red"/>
</View>
时间: 2024-12-14 18:08:42

第四篇、微信小程序-icon组件的相关文章

微信小程序image组件binderror使用例子(对应html、js中的onerror)

官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.gif" onerror="this.src='https:w.chesu

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

微信小程序倒计时组件开发

今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) {  var second = that.data.seco

微信小程序图表组件 wx-f2

摘自 杀个程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f Github地址:https://github.com/antvis/wx-f2 AntV F2地址: AntV F2 微信小程序图表组件 wx-f2,源于 F2,专为移动而生 F2,专为移动而生的可视化解决方案,特为大家提供了微信小程序端版本,体积小巧,性能卓越,底层基于图形语法,可以提供非常丰富的图表类型. 可以使用微信扫描以下二维码先体验一番: image wx-f2 F2 的微信小程序版

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

微信小程序气泡组件

资料 网址 微信小程序气泡组件 https://github.com/byk04712/weapp-popover 原文地址:https://www.cnblogs.com/cag2050/p/12605725.html

微信小程序之组件的集合(四)

这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是将一本书的展示看做是一个组件,然后就是循环展示所有请求的书籍的信息,所以需要把一本书当做一个组件来制作,这样就能比较合理的解决这个问题! 1 // book组件的页面的代码 2 <view class="container"> 3 <image src="{{b

微信小程序开发—组件及API

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,