微信小程序 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 列表

 



标签:微信小程序

相关阅读 >>

微信小程序云开发sdk文档 微信支付查询订单

微信小程序 weuicells

微信小程序 小程序使用bindaccount

微信小程序 基础类库

微信小程序云开发 api数据库删除记录

微信小程序 广告-原生模板广告

微信小程序云开发服务端数据库api 更新一条记录

微信小程序api 获取位置

微信小程序api 页面间事件通信通道

微信小程序 框架(mina)

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




打赏

取消

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

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

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

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

评论

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