mp progress 다운로드 - mp progress 소스 코드 다운로드

mp progress

AI 소스 코드

支持在wepy中是用api方式

다운로드

mp 진행

작은 프로그램에서 순환 진행률 표시줄을 구현하는 데 중점을 둔 도구입니다.

왜

미니 프로그램에는 현재 기본적으로 구성 요소 형태로 도입되고 사용되는 많은 타사 UI 구성 요소가 있습니다. 그러나 프로젝트 스타일이 타사에 더 가깝다면 이러한 전체 타사 구성 요소 라이브러리 세트가 더 편리합니다. 타사 UI 라이브러리의 특정 구성 요소만 사용하는 경우 매우 큰 라이브러리를 설치하는 것은 합리적이지 않습니다.

mp-progress 의 대상 파일 크기는 7KB 미만입니다. 편리한 js 호출 방법과 기본 캔버스 태그 작성 방법은 높은 수준의 제어를 유지하려는 프로젝트에 매우 적합합니다.

설치하다

 $ npm install mp-progress --save

기본 라이브러리 요구 사항

문서 요구사항에 따라 기본 라이브러리 버전 2.7.0 이상을 지원하므로 최신 기본 라이브러리를 사용하는 것이 가장 좋습니다.

위챗 네이티브 미니 프로그램

WeChat의 기본 애플릿을 사용하여 npm 패키지를 도입하려면 추가 구성이 필요합니다. 자세한 내용은 https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13을 참조하세요.

컴포넌트 모드에서 호출(간단하고 사용하기 쉬움)

해당 페이지에 컴포넌트 소개, 데이터 초기화, wxml 내 컴포넌트 활용

컴포넌트 구현의 차이로 인해 wepy에서는 이 방법을 적용할 수 없습니다.

 {
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
  config: {
    canvasSize: {
      width: 400,
      height: 400
    },
    percent: 100,
    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
    needDot: true,
    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

이 방법은 페이지가 백분율을 변경하면 mp-progress가 자동으로 보기를 업데이트하는 양방향 바인딩 원칙을 따릅니다.

API 호출(mp-progress 위에 새로운 구성요소를 구축해야 하는 사용자에게 적합)

이 메소드는 wepy에 적합하지만 onReady 콜백 함수에서 초기화되어야 합니다.

전달된 단위는 rpx 입니다. 즉, 캔버스 너비가 400rpx이면 400이 전달되고 실제 크기는 나중에 자동으로 계산됩니다.

 import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度，60代表60%
mprogress.draw(60);

...
<canvas class="canvas" type="2d" id="progress"></canvas>

디스플레이 모드

효과	분석하다
	일반 모드(기본값)
	백분율 모드(필요에 따라 백분율만 전달하면 됩니다. 매개변수 설명 참조)

매개변수 설명

매개변수 이름	데이터 유형	필수 매개변수	분석하다	목록
목표	물체	예	페이지 컨텍스트	이것
캔버스 ID	끈	예	페이지 캔버스의 ID	진전
캔버스 크기	물체	예	캔버스의 크기, 해당 단위는 rpx이며 숫자만 전달하면 됩니다.	{너비: 200, 높이: 300}
퍼센트	숫자	아니요	기본적으로 원은 360도에 따라 계산되어 표시됩니다. 80%가 전달되면 캔버스 크기를 기준으로 최대 반원 호가 자동으로 그려집니다. 유효한 값은 50%에서 100% 사이입니다.	100
바스타일	정렬	예	호 진행 스타일은 배열 요소의 위치 순서에 따라 렌더링됩니다. 일반적으로 첫 번째 요소 구성은 전체 호를 덮는 배경색이고 두 번째 요소 구성은 진행률에 따라 호를 렌더링하는 것입니다. fillStyle은 일반 색상일 수도 있고 그라디언트 색상일 수도 있습니다. 그라디언트 색상을 사용하려면 각 점의 위치 및 색상 정보를 배열 형식으로 전달해야 합니다.	[{width: 12, fillStyle: '#f0f0f0'}, {width: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}]
필요점	부울	아니요	진행률을 표시해야 합니까?	거짓
도트 스타일	정렬	아니요	진행 지점 스타일 구성은 최대 두 가지 오버레이 스타일을 지원하여 진행 지점을 명확하게 표시하기 위해 기본적으로 첫 번째 지점에 그림자를 추가합니다. 첫 번째 진행 지점의 직경이 진행률 표시줄보다 큰 경우 진행률이 캔버스에 완전히 표시되도록 하려면 그려진 진행률 표시줄 원을 해당 차이만큼 줄여야 합니다. 여기서 그림자는 선택적 구성입니다. 그림자의 값은 `(0, 0, r/2, shadow)` 입니다.	dotStyle: [{r: 24, fillStyle: '#fff', 그림자: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

그리기 기능 설명

진행률 표시줄이 페이지에서 여러 번 업데이트될 수 있다는 점을 고려하면 구성 요소가 인스턴스화된 후 draw 메서드를 수동으로 호출하여 그림을 그려야 합니다.

매개변수 이름	데이터 유형	필수 매개변수	분석하다
백분율	숫자	예	예를 들어 호 백분율이 60으로 전달되면 호의 나머지 60%만 시계 반대 방향으로 렌더링됩니다.

기타 지침

호 끝점 스타일을 설정하는 방법
lineCap 매개변수는 barStyle 의 모든 매개변수 항목에 추가될 수 있습니다. 예: barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}] lineCap 유효한 값은 문서를 참조하세요.
SDK 버전 2.7.0 이상에서 실행해야 합니다.
이 구성 요소는 WeChat의 최신 동일 레이어 렌더링 방법을 채택했으며 SDK 버전이 2.7.0 이상이어야 합니다.
도트 스타일
dotStyle에 그림자가 포함된 경우 그림자가 원의 모든 영역에 완전히 표시될 수 있도록 진행률 표시줄의 반경이 자동으로 줄어듭니다.
진행 애니메이션
현재 애니메이션은 barStyle의 마지막 요소 정의에서만 작동하며 각 프레임의 애니메이션은 전체 애니메이션의 2%입니다.

텍스트 표시 효과

일반 모드

구현 코드는 다음을 참조하세요.

 <view class="garage-status">
  <canvas class="canvas" type="2d" id="progress"></canvas>
  <view class="status-ctn">
    <view class="status-count">127/127</view>
    <view class="desc-text">适用车位剩余</view>
  </view>
</view>