집 >웹 프론트엔드 >JS 튜토리얼 >WeChat 미니 프로그램에서 프로세스 진행 스타일을 구현하는 방법은 무엇입니까?

WeChat 미니 프로그램에서 프로세스 진행 스타일을 구현하는 방법은 무엇입니까?

亚连원래의: 2018-06-11 17:06:051943검색

현재 WeChat 애플릿을 작업 중이며 프로세스 진행 상황을 그래프 스타일로 구현해야 합니다. 아래에서 프로세스 진행 상황을 구현하기 위한 WeChat 애플릿의 그래프 스타일 기능에 대한 예제 코드를 가져왔습니다. 필요한 친구는 이를 참조할 수 있습니다.

현재 WeChat 애플릿을 작업 중입니다. 프로그램은 다음과 같이 프로세스 진행 차트 스타일을 구현해야 합니다.

요구 사항:

완료되지 않은 회색 점은 파란색 점을 사용하여 표시됩니다.
현황
을 표현하기 위해 작은 점을 사용하는 것은 비교적 간단합니다. 구현 아이디어는 목록을 사용하여 구현하는 것입니다. 목록에 있는 각 항목의 스타일은 아래와 같습니다.

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

위 그림에 따르면 html 레이아웃은 다음과 같습니다 WeChat 미니 프로그램에서 프로세스 진행 스타일을 구현하는 방법은 무엇입니까?

 <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 미니 프로그램에서 프로세스 진행 스타일을 구현하는 방법은 무엇입니까?

관련 기사