집 > 기사 > 위챗 애플릿 > 프로세스 진행 기능을 구현하는 WeChat 애플릿 공유 예시

프로세스 진행 기능을 구현하는 WeChat 애플릿 공유 예시

小云云원래의: 2018-01-23 10:59:065153검색

WeChat 미니 프로그램은 매우 인기가 높다고 할 수 있습니다. 저는 현재 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: '提交工单',
      start: '#fff',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已接单',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '开始维修',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '维修结束',
      start: '#EFF3F6',
      end: '#EFF3F6',
      icon: '../../img/process_1.png'
    },
    {
      name: '已确认',
      start: '#EFF3F6',
      end: '#fff',
      icon: '../../img/process_1.png'
    }],
  },

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

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

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

//进度条的状态
  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 애플릿 공유 예시

관련 기사