微信小程序 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入门教程(1) 什么是JS
Jan 31 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
微信小程序实现分页加载效果
Nov 19 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
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
用python批量下载apk
2020/12/29 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
亮剑观后感
2015/06/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
高一作文之暖冬
2019/11/09 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript