微信小程序 MinUI组件库系列之badge徽章组件示例

前端之家收集整理的这篇文章主要介绍了微信小程序 MinUI组件库系列之badge徽章组件示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 badge 徽章组件是一个很常用的基础元件, MinUI 中 badge 组件的效果图如下:

各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:

下面介绍 badge 组件的使用方式。

1、使用下列命令安装 ,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:

2、初始化一个小程序项目。

选择

新建小程序

选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档:

3、安装 badge 组件。

进入刚才新建的小程序项目的目录中:

安装组件:

4、开启dev。

开启之后,修改源码后都会重新编译。

5、在页面中引入组件。

在编辑器中打开 src/pages 目录下的 home/index.wxp 文件,在 script添加 config 字段,配置小程序自定义组件字段,代码如下:

wxc-badge 即为头像组件的标签名,可以在 wxml 中使用。

6、在 wxml 中使用 wxc-badge 标签

home/index.wxp 文件template添加 wxc-badge 标签代码如下:

7、打开微信开发者工具,指定 dist 目录,预览项目。

home/index.wxp 文件代码如下所示:

图示:

至此,minui 组件库的 badge 徽章组件在 Min 工具生成小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接

了解组件的使用方式后,下面开始介绍 badge 组件的 API 。

Badge

属性 描述

更多demo

1、vaule 传值

图示:

图示:

图示:

<div class="jb51code">
<pre class="brush:xhtml;">

更多组件更新同步请关注 MinUI 小程序组件库示例查看,或请移步到实时同步更新的

相关链接

开源组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章