微信小程序 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 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
javascript初学者常用技巧
Sep 02 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php时区转换转换函数
2014/01/07 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
php强制下载文件函数
2016/08/24 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
详解puppeteer使用代理
2018/12/27 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python操作MySQL数据库具体方法
2013/10/28 Python
详解Python的循环结构知识点
2019/05/20 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python如何存储数据到json文件
2020/03/09 Python
python中yield的用法详解
2021/01/13 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
医学院四年学习生活的自我评价
2013/11/06 职场文书
护士实习鉴定范文
2013/12/22 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
会计工作岗位职责
2015/02/03 职场文书
婚宴新郎致辞
2015/07/28 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python