Méthode de mise en œuvre de la fonction de style graphique pour la progression du processus de l'applet WeChat-Développement de mini-programmes-php.cn

Méthode de mise en œuvre de la fonction de style graphique pour la progression du processus de l'applet WeChat

小云云

Libérer： 2018-01-17 16:50:33

original

3110 Les gens l'ont consulté

Nous rencontrerons diverses fonctions lors du développement de WeChat. Cet article vous expliquera comment mettre en œuvre un style de graphique de progression de processus.

Méthode de mise en œuvre de la fonction de style graphique pour la progression du processus de lapplet WeChat

Exigences :

Les points gris inachevés indiquent
Les paramètres terminés sont définis à l'aide de points bleus
L'état actuel est représenté par des petits points avec un anneau extérieur

Mise en œuvre C'est relativement simple . L'idée de mise en œuvre est d'utiliser une liste. Le style de chaque élément de la liste est comme indiqué ci-dessous

Méthode de mise en œuvre de la fonction de style graphique pour la progression du processus de lapplet WeChat

Le dessin utilisant le carnet de croquis Win10 n'est pas beau.

Ce que l'image signifie, c'est que chaque élément a une ligne devant, un cercle au milieu et une ligne derrière. La raison en est que le texte ci-dessous doit être centré sous le cercle. Si aucun texte n’est nécessaire, il serait plus simple d’avoir un cercle suivi d’une ligne droite.

D'après l'image ci-dessus, la disposition HTML est la suivante

 <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>

Copier après la connexion

OK La liste a définitivement besoin d'un tableau. Le tableau est le suivant <. 🎜>

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

Copier après la connexion

D'après la photo de l'article ci-dessus, nous verrons que s'il est affiché directement, il y aura deux lignes des deux côtés. Comment supprimer ces deux lignes ? C'est très simple. Laissez la couleur d'arrière-plan du conteneur parent être la même que la première.

Changez l'arrière-plan de la mise en page parent en blanc, puis contrôlez la couleur du segment de ligne avant du premier élément de la liste en blanc et la couleur du segment de ligne arrière du dernier élément en blanc. De cette façon, il semble que les segments de ligne des deux côtés ont été supprimés

Lorsque les données changent, il suffit de modifier les attributs des objets dans le tableau. Il est préférable d'utiliser ce qui suit comme référence

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

Copier après la connexion

Dans les données du code ci-dessus, l'état est utilisé pour représenter l'achèvement et l'incomplétude. Nous mettons ceux terminés en bleu et ceux inachevés en gris.

Utilisez l'index pour enregistrer s'il s'agit du point actuel (le point actuel est le dernier complété par l'état).

Le code dans le CSS final est également très simple

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

Copier après la connexion

Recommandations associées :

javascript implémente en fonction des progrès sur l'exemple de fonction de barre de minuterie

Exemple d'effet de graphique de progression de grande vague cool HTML5 Canvas (avec démo)

JS et HTML sont combinés pour réaliser le processus progression Introduction aux méthodes d'affichage des barres

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!