各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:
下面介绍 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
目录,预览项目。
图示:
至此,minui 组件库的 badge 徽章组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:
了解组件的使用方式后,下面开始介绍 badge 组件的 API 。
Badge
描述 |
---|
更多demo
1、vaule 传值
图示:
图示:
图示:
<div class="jb51code">
<pre class="brush:xhtml;">
<view class="message">
<image class="messageavatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png">
<wxc-badge class="messagebadge" type="dot">30