Wie implementiert man den Prozessfortschrittsstil im WeChat-Miniprogramm?

Ich arbeite kürzlich an einem WeChat-Applet und muss einen Diagrammstil für den Prozessfortschritt implementieren. Nachfolgend habe ich Ihnen den Beispielcode der Diagrammstilfunktion des WeChat-Applets zur Implementierung des Prozessfortschritts zusammengestellt dazu

Ich arbeite kürzlich an einem WeChat-Applet und muss ein Prozessfortschrittsdiagramm wie unten gezeigt implementieren

Anforderungen:

1. Nicht abgeschlossen. Graue Punkte stellen dar.

2. Abgeschlossene Einstellungen werden durch blaue Punkte dargestellt.

3. Der aktuelle Status wird durch dargestellt kleine Punkte mit einem äußeren Ring

Die Implementierungsidee besteht darin, eine Liste zu verwenden. Der Stil jedes Elements in der Liste ist wie folgt 🎜>

Verwendung Die Zeichnungen im Win10-Zeichenbrett sehen nicht gut aus

Das Bild bedeutet, dass jedes Element eine Linie vorne, einen Kreis in der Mitte und eine Linie dahinter. Der Grund dafür ist, dass der Text unten zentriert unter dem Kreis platziert werden muss. Wenn kein Text benötigt wird, wäre es einfacher, einen Kreis gefolgt von einer geraden Linie zu verwenden.

Laut obigem Bild ist das HTML-Layout wie folgt

 <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, die Liste benötigt definitiv ein Array. Das Array ist wie folgt.

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'
 }],
 },

Gemäß oben Im Artikelbild sehen wir die direkte Anzeige. Wenn auf beiden Seiten eine zusätzliche Zeile angezeigt wird, wie kann ich diese beiden Zeilen entfernen? Es ist ganz einfach, die Hintergrundfarbe des übergeordneten Containers mit der vorherigen Farbe abzugleichen.

Ändern Sie den Hintergrund des übergeordneten Layouts in Weiß und legen Sie dann die Farbe des vorderen Liniensegments im ersten Element in der Liste auf Weiß und die Farbe des hinteren Liniensegments im letzten Element auf Weiß fest. Auf diese Weise sieht es so aus, als wären die Liniensegmente auf beiden Seiten entfernt worden.

Wenn sich die Daten ändern, müssen wir nur die Attribute der Objekte im Array ändern. Es ist besser, das Folgende als Referenz zu verwenden

//进度条的状态
 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
 })
 },

In den Daten im obigen Code wird der Status verwendet, um Vollständigkeit und Unvollständigkeit darzustellen. Wir setzen die fertigen auf Blau und die unvollendeten auf Grau.

Verwenden Sie den Index, um aufzuzeichnen, ob es sich um den aktuellen Punkt handelt (der aktuelle Punkt ist der letzte, der vom Bundesstaat abgeschlossen wurde).

Der Code im endgültigen CSS ist auch sehr einfach

.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;
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Elememt-UI zum Erstellen eines Management-Backends in Vue (ausführliches Tutorial)

Über WebView in React-Native Behandeln Sie die Rückgabemethode ohne Rückruf.

Methode zum Lesen von Daten über die JSON-Datei in Vue2.5

Verwenden Sie eine HTTP-Anfrage in Vue2.5.2. Anleitung Erhalten Sie statische JSON-Daten

Verwenden des Plugins Owlcarousel in der jQuery-Diashow (ausführliches Tutorial)

Verwenden des Plugins Owlcarousel in der jQuery-Diashow (Detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonWie implementiert man den Prozessfortschrittsstil im WeChat-Miniprogramm?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!