WeChatミニプログラムでプロセス進行スタイルを実装するにはどうすればよいですか?

私は現在 WeChat アプレットに取り組んでおり、プロセスの進行状況のグラフ スタイルを実装する必要があります。以下に、プロセスの進行状況を実装するための WeChat アプレットのグラフ スタイル関数のサンプル コードを示します。それを必要とする友人はそれを参照してください。

私は現在 WeChat アプレットに取り組んでいます。プログラムは次のようなプロセス進行状況チャート スタイルを実装する必要があります

要件:

1. 未完成の灰色の点は、青い点を使用して

2. 完了したものを表します。

現在の状況 外側のリングを持つ小さなドットを使用して実装するのは比較的簡単です。実装アイデアは、リスト内の各項目のスタイルを以下に示すようにすることです

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

上記のアイテムの画像によると、直接表示すると、両側に余分な線ができます。 この 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;
}

上記は私が皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

Elememt-UI を使用して Vue で管理バックエンドを構築する (詳細なチュートリアル)

react-native で WebView を介して非コールバック メソッドを返す

Vue2.5 で json ファイルを読み取るデータの取得方法

vue2.5.2 で http リクエストを使用して静的 json データを取得する方法

jQuery スライドショーでプラグイン owlcarousel を使用する (詳細なチュートリアル)

jQuery スライドショーでプラグイン owlcarousel を使用する(詳細なチュートリアル)

以上がWeChatミニプログラムでプロセス進行スタイルを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。