집 > 기사 > 위챗 애플릿 > WeChat 애플릿 프로세스 진행 그래프 스타일 기능 구현 방법

WeChat 애플릿 프로세스 진행 그래프 스타일 기능 구현 방법

小云云원래의: 2018-01-17 16:50:333086검색

WeChat을 개발할 때 다양한 기능을 접하게 됩니다. 이 글에서는 프로세스 진행 차트 스타일을 구현하는 방법을 알려드리겠습니다.

요구 사항:

완료되지 않은 회색 점은 표시됩니다.
전체 설정은 파란색 점으로 표시됩니다.
현재 상태는 외부 링이 있는 작은 점으로 표시됩니다.

그것은 구현 방법은 비교적 간단합니다. 목록에 있는 각 항목의 스타일은 아래와 같습니다

WeChat 애플릿 프로세스 진행 그래프 스타일 기능 구현 방법

win10 드로잉 보드를 사용하면 보기에 좋지 않습니다

그림의 의미 각 항목의 앞부분입니다. 중앙에 원이 있는 선이 있고 그 뒤에 선이 있습니다. 그 이유는 아래 텍스트가 원 아래 중앙에 위치해야 하기 때문입니다. 텍스트가 필요하지 않은 경우 원 뒤에 직선이 오는 것이 더 간단할 것입니다.

위 그림에 따르면 html 레이아웃은 다음과 같습니다

 <view class=&#39;order_process&#39;>
  <view class=&#39;process_wrap&#39; wx:for="{{processData}}" wx:key="">
  <view class=&#39;process&#39;>
   <view class=&#39;process_line&#39; style="background:{{item.start}}"></view>
   <image class=&#39;process_icon&#39; src="{{item.icon}}"></image>
   <view class=&#39;process_line&#39; style="background:{{item.end}}"></view>
  </view>
  <text class=&#39;process_name&#39;>{{item.name}}</text>
  </view>
 </view>

OK 목록에는 반드시 배열이 필요합니다. 배열은 다음과 같습니다

processData: [{
  name: &#39;提交工单&#39;,
  start: &#39;#fff&#39;,
  end: &#39;#EFF3F6&#39;,
  icon: &#39;../../img/process_1.png&#39;
 },
 {
  name: &#39;已接单&#39;,
  start: &#39;#EFF3F6&#39;,
  end: &#39;#EFF3F6&#39;,
  icon: &#39;../../img/process_1.png&#39;
 },
 {
  name: &#39;开始维修&#39;,
  start: &#39;#EFF3F6&#39;,
  end: &#39;#EFF3F6&#39;,
  icon: &#39;../../img/process_1.png&#39;
 },
 {
  name: &#39;维修结束&#39;,
  start: &#39;#EFF3F6&#39;,
  end: &#39;#EFF3F6&#39;,
  icon: &#39;../../img/process_1.png&#39;
 },
 {
  name: &#39;已确认&#39;,
  start: &#39;#EFF3F6&#39;,
  end: &#39;#fff&#39;,
  icon: &#39;../../img/process_1.png&#39;
 }],
 },

위 항목 그림에 따르면 직접 표시하면 양쪽에 여러 줄이 표시됩니다. 이 두 줄을 제거하는 방법은 매우 간단합니다. 상위 컨테이너의 배경색을 이전 색상과 동일하게 만드십시오.

상위 레이아웃의 배경을 흰색으로 변경한 다음 목록의 첫 번째 항목에 있는 앞선 부분의 색상을 흰색으로 제어하고 목록의 마지막 항목에 있는 뒷선 부분의 색상을 제어합니다. 이렇게 하면 양쪽의 선분이 제거된 것처럼 보입니다.

데이터가 변경되면 배열에 있는 개체의 속성만 변경하면 됩니다. 참고로 다음을 활용하시면 더 좋습니다

//进度条的状态
 setPeocessIcon: function () {
 var index = 0//记录状态为1的最后的位置
 var processArr = this.data.processData
 // console.log("progress", this.data.detailData.progress)
 for (var i = 0; i < this.data.detailData.progress.length; i++) {
  var item = this.data.detailData.progress[i]
  processArr[i].name = item.word
  if (item.state == 1) {
  index = i
  processArr[i].icon = "../../img/process_3.png"
  processArr[i].start = "#45B2FE"
  processArr[i].end = "#45B2FE"
  } else {
  processArr[i].icon = "../../img/process_1.png"
  processArr[i].start = "#EFF3F6"
  processArr[i].end = "#EFF3F6"
  }
 }
 processArr[index].icon = "../../img/process_2.png"
 processArr[index].end = "#EFF3F6"
 processArr[0].start = "#fff"
 processArr[this.data.detailData.progress.length - 1].end = "#fff"
 this.setData({
  processData: processArr
 })
 },

위 코드의 데이터에서 상태는 완료와 불완전을 나타내는 데 사용됩니다. 완성된 것은 파란색으로, 미완성된 것은 회색으로 설정했습니다.

인덱스를 사용하여 현재 지점인지 기록합니다(현재 지점은 주별로 완료된 마지막 지점입니다).

최종 CSS의 코드도 매우 간단합니다

.order_process {
 display: flex;
 flex-wrap: nowrap;
 padding: 10rpx 10rpx 20rpx 10rpx;
 background-color: #fff;
}

.process_wrap {
 display: flex;
 flex-direction: column;
 flex: 1;
 align-items: center;
}

.process {
 display: flex;
 align-items: center;
 width: 100%;
}

.process_icon {
 width: 50rpx;
 height: 50rpx;
}

.process_line {
 background: #eff3f6;
 flex: 1;
 height: 5rpx;
}

.process_name {
 font-size: 24rpx;
}

WeChat 애플릿 프로세스 진행 그래프 스타일 기능 구현 방법

관련 기사