위 챗 애플 릿 MinUI 구성 요소 라 이브 러 리 시리즈 badge 배지 구성 요소 예제

MinUI위 챗 애플 릿 사용자 정의 구성 요소 특성 을 바탕 으로 개발 한 간결 하고 사용 하기 쉬 우 며 효율 적 인 구성 요소 라 이브 러 리 로 적용 장면 이 넓 고 애플 릿 원생 프레임 워 크,각종 애플 릿 구성 요소 주류 프레임 워 크 등 을 커버 하 며 효율 적 인 명령 행 도 구 를 제공 합 니 다.MinUI 구성 요소 라 이브 러 리 에는 많은 기본 구성 요소 가 포함 되 어 있 습 니 다.그 중에서 badge 배지 구성 요 소 는 자주 사용 하 는 기본 구성 요소 입 니 다.MinUI 에서 badge 구성 요소 의 효과 도 는 다음 과 같 습 니 다.

다양한 타 입 이 있 습 니 다.편리 하고 빠 른 것 처럼 보이 지 않 습 니까?(^ ^)위 챗 을 열 어 아래 의 작은 프로그램 QR 코드 를 먼저 볼 수 있 습 니 다.

다음은 badge 구성 요소 의 사용 방식 을 소개 합 니 다.
1.다음 명령 으로 설치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 class="user__un-read-msg-count">9</wxc-badge>

7.위 챗 개발 자 도 구 를 열 고wxc-badge디 렉 터 리 를 지정 하고 프로젝트 를 미리 봅 니 다.dist파일 의 코드 는 다음 과 같다.


<!-- 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 배지 구성 요소 가 Min 도구 에서 생 성 된 애플 릿 프로젝트 에서 의 방법 을 소개 하 였 습 니 다.다른 장면 은 원본 애플 릿 이나 다른 애플 릿 프레임 워 크 프로젝트 에서 의 사용 방식 은 다음 링크 로 이동 하 십시오.
기 존 애플 릿 항목 에서 MinUI 구성 요소 소개 사용 하기
구성 요소 의 사용 방식 을 알 아 본 후,다음은 badge 구성 요소 의 API 를 소개 합 니 다.
Badge
속성
묘사 하 다.
value
[선택 가능]설정 값,우선 순위 가 탭 내장 값 보다 높 습 니 다.
max
[선택 가능]최대 경계 설정,경계 넘 기 수 치 는 maxVal+로 표시
type
[선택 가능]태그 형식 을 설정 하고,직위 dot 는 약 한 알림 의 원점 으로 표시 합 니 다.
더 많은 데모
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>

그림:

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>

그림:

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>

그림:

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>