WeChatアプレット処理進捗のグラフスタイル機能の実装方法-ミニプログラム開発-php.cn

WeChatアプレット処理進捗のグラフスタイル機能の実装方法

小云云

リリース： 2018-01-17 16:50:33

オリジナル

3006 人が閲覧しました

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: &#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;
 }],
 },

ログイン後にコピー

上のアイテム画像によると、次のことがわかります。直接表示すると、両側に複数の行が表示されます。この 2 つの行を削除する方法は非常に簡単です。親コンテナの背景色を前の色と同じにするだけです。

親レイアウトの背景を白に変更し、リストの最初の項目の前線セグメントの色を白に制御し、リストの最後の項目の後線セグメントの色を制御します。こうすると、両側の線分が削除されたように見えます

データが変更された場合、配列内のオブジェクトの属性を変更するだけで済みます。以下を参考にした方が良いです

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

ログイン後にコピー