微信小程序 WeUI基础组件


本文整理自网络,侵删。

Badge徽章

出现在按钮、图标附近的数字或者状态标记。

示例代码:

{
  "usingComponents": {
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell",
    "mp-badge": "../components/badge/badge"
  }
}

Gallery画廊

用于多张图片展示,类似原生的wx.previewImage的展示。

示例代码:

{
  "usingComponents": {
    "mp-gallery": "../components/gallery/gallery"
  }
}

Loading加载

加载数据时的 loading 效果

示例代码:

{
    "usingComponents": {
        "mp-loading": "../components/loading/loading"
    },
    "navigationBarTitleText": "UI组件库"
}

Icon

图标

代码引入

在 page.json 中引入组件

{
  "usingComponents": {
    "mp-icon": "../../components/icon/icon"
  }
}

示例代码

<!--WXML示例代码-->
<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
<mp-icon icon="add" color="black" size="{{25}}"></mp-icon>

效果展示

属性列表

属性类型默认值说明
extClassstring组件类名
typestringoutlineIcon类型,可选值 outline(描边),field(填充)
iconstringIcon名字
sizenumber20Icon的大小,单位 px
colorstringblackIcon的颜色,默认黑色

Icon 列表

 



标签:微信小程序

相关阅读 >>

微信小程序 页面路由

微信小程序 小程序使用batchgetorder

微信小程序云开发服务端数据库api 查询指令

微信小程序 基础组件

微信小程序特有页面间传参方式

微信小程序云开发服务端数据库api 指定查询结果集数量上限

微信小程序api 相机-创建cameracontext对象

微信小程序api 实时语音-取消监听被动断开通话事件

微信小程序 网络

微信小程序 扩展组件绘制canvas

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...