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


Posted in Javascript onAugust 20, 2018

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

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

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

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

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

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

npm install -g @mindev/min-cli

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

min init my-project

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

3、安装 badge 组件。

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

cd my-project

安装组件:

min install @minui/wxc-badge

4、开启dev。

min dev

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

5、在页面中引入组件。

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

export default {
 config: {
 "usingComponents": {
  'wxc-badge': "@minui/wxc-badge"
 }
 }
}

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

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

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

<wxc-badge class="user__un-read-msg-count">9</wxc-badge>

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

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

<!-- home/index.wxp -->
<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
 <wxc-badge class="user__un-read-msg-count">9</wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -8rpx;
 }
</style>

图示:

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

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

在已有小程序项目中使用 MinUI 组件介绍

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

Badge

属性 描述
value [可选] 设置数值,优先级会高于标签内嵌套值
max [可选] 设置最大边界,越界数值显示为 maxVal+
type [可选] 设置标记类型,职位 dot 显示为弱提示的圆点

更多demo

1、vaule 传值

<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
 <wxc-badge class="user__un-read-msg-count" value="100"></wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

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

2、设置最大边界值

<template>
 <view class="user">
 <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg"></image>
 <wxc-badge class="user__un-read-msg-count" max="99" value="230"></wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .user {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .user__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
 }
 .user__un-read-msg-count {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

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

3、个性化设置

<template>
 <view class="message">
 <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
 <wxc-badge class="message__badge">new</wxc-badge>
 </view>
</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .message {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .message__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 }
 .message__badge {
 position: absolute;
 top: -16rpx;
 right: -18rpx;
 }
</style>

图示:

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

4、红点模式

<template>

 <view class="message">
 <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
 <wxc-badge class="message__badge" type="dot">30</wxc-badge>
 </view>

</template>

<script>
export default {
 config: {
 usingComponents: {
 'wxc-badge': '@minui/wxc-badge'
 }
 },
 data: {}
}
</script>

<style>
 .message {
 width: 100rpx;
 height: 100rpx;
 position: relative;
 }
 .message__avatar {
 display: block;
 width: 100rpx;
 height: 100rpx;
 }
 .message__badge {
 position: absolute;
 top: -20rpx;
 right: -2rpx;
 }
</style>

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

更多组件更新同步请关注 MinUI 小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 badge 徽章组件使用文档 。

相关链接

  • Min-Cli 官方仓库
  • MinUI 官方仓库
  • Min 官方文档

开源组件

  • 布局元素

    • flex 布局
    • cc 水平垂直居中
  • 基础元件

    • avatar 头像
    • badge 徽章
    • elip 文本截断
    • icon 图标
    • label 标签
    • loadmore 页底提示
    • price 价格
    • progress 进度条
  • 功能组件

    • abnor 异常流展示
    • countdown 倒计时
    • counter 数字框
    • loading 加载提示
    • mask 遮罩层
    • steps 步骤条
    • tab 选项卡
  • 提示反馈

    • dialog 对话框
    • popup 弹出层
    • toast 提示框
  • 表单组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
You might like
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
使javascript也能包含文件
2006/10/26 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
js Dom实现换肤效果
2017/10/21 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
分析Python中解析构建数据知识
2018/01/20 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python实现xml转json文件的示例代码
2020/12/30 Python
中专生毕业自我鉴定
2013/11/01 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
仓管员岗位责任制
2014/02/19 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
表决心的诗句大全
2014/03/11 职场文书
新学期教师寄语
2014/04/02 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android