微信小程序 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:以前写的xmlhttp池,代码
May 18 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
一个oracle+PHP的查询的例子
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
PHP7新特性
2021/03/09 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
基于python requests库中的代理实例讲解
2018/05/07 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Django REST 异常处理详解
2020/07/15 Python
一道SQL面试题
2012/12/31 面试题
init进程的作用
2012/04/12 面试题
教师个人教学总结
2015/02/11 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
党纪处分决定书
2015/06/24 职场文书
导游词之山东孔庙
2019/11/04 职场文书
HAM-2000摩机图
2021/04/22 无线电
比较几种Redis集群方案
2021/06/21 Redis
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL