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

 



标签:微信小程序

相关阅读 >>

微信小程序api 转发消息

微信小程序 api

微信小程序 图片高清化能力

微信小程序 darkmode适配指南

微信小程序api 数据缓存

微信小程序 wi-fi

sdk数据库 command查询逻辑操作符

微信小程序 小程序搜索imagesearch

微信小程序 城市服务消息通路接口

微信小程序内容组件 progress

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




打赏

取消

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

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

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

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

评论

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