mp progress Télécharger - mp progress Téléchargement du code source

mp progress

Code Source AI

支持在wepy中是用api方式

Télécharger

mp-progrès

Un outil axé sur la mise en œuvre de barres de progression circulaires dans les petits programmes

pourquoi

Les mini-programmes contiennent actuellement de nombreux composants d'interface utilisateur tiers, qui sont essentiellement introduits et utilisés sous forme de composants. Si le style du projet est plus proche de celui de tiers, alors ces ensembles complets de bibliothèques de composants tiers sont plus pratiques. si vous n'utilisez que certains composants de la bibliothèque d'interface utilisateur tierce. Si tel est le cas, il ne serait pas raisonnable d'installer une très grande bibliothèque.

La taille du fichier cible de mp-progress est inférieure à 7 Ko. La méthode d'appel js pratique et la méthode d'écriture de balise canvas native sont très adaptées aux projets qui souhaitent conserver un degré élevé de contrôle.

Installer

 $ npm install mp-progress --save

Exigences de base de la bibliothèque

Selon les exigences du document, les versions de bibliothèque de base 2.7.0 et supérieures sont prises en charge. Le meilleur effet est d'utiliser la dernière bibliothèque de base.

Mini-programme natif WeChat

L'utilisation de l'applet natif de WeChat pour introduire les packages npm nécessite une configuration supplémentaire. Pour plus de détails, veuillez consulter https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13.

Appel en mode composant (simple et facile à utiliser)

Introduire les composants dans la page correspondante, initialiser les données et utiliser les composants en wxml

En raison des différences dans l'implémentation des composants, cette méthode n'est pas applicable dans wepy

 {
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
  config: {
    canvasSize: {
      width: 400,
      height: 400
    },
    percent: 100,
    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
    needDot: true,
    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

Cette méthode suit le principe de la liaison bidirectionnelle des données Lorsque la page change de pourcentage, mp-progress mettra automatiquement à jour la vue.

Appel API (convient à ceux qui ont besoin de créer de nouveaux composants en plus de mp-progress)

Cette méthode convient à wepy, mais elle doit être initialisée dans la fonction de rappel onReady.

L'unité transmise est rpx , c'est-à-dire que si la largeur du canevas est de 400rpx, alors 400 est transmis et la taille réelle sera automatiquement calculée plus tard.

 import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度，60代表60%
mprogress.draw(60);

...
<canvas class="canvas" type="2d" id="progress"></canvas>

mode d'affichage

Effet	analyser
	Mode normal (par défaut)
	Mode pourcentage (il vous suffit de transmettre le pourcentage si nécessaire, voir la description du paramètre)

Description des paramètres

Nom du paramètre	type de données	Paramètres requis	analyser	Liste
cible	Objet	Oui	Contexte de la page	ce
identifiant de la toile	Chaîne	Oui	L'identifiant du canevas de la page	progrès
taille de la toile	Objet	Oui	La taille du canevas, l'unité correspondante est rpx, il suffit de passer le nombre	{largeur : 200, hauteur : 300}
pour cent	Nombre	Non	Par défaut, le cercle est calculé et affiché selon 360 degrés. Si 80 % sont transmis, l'arc de demi-cercle maximum sera automatiquement dessiné en fonction de la taille du canevas. La valeur valide est comprise entre 50 % et 100 %.	100
stylebarre	Tableau	Oui	Le style de progression de l'arc est rendu en fonction de l'ordre de position des éléments du tableau. Généralement, la configuration du premier élément est la couleur d'arrière-plan qui couvre tout l'arc, et la configuration du deuxième élément consiste à restituer l'arc en fonction du pourcentage de progression. fillStyle peut être une couleur normale ou une couleur dégradée. Pour utiliser la couleur dégradée, vous devez transmettre les informations de position et de couleur de chaque point sous le format d'un tableau.	[{largeur : 12, fillStyle : '#f0f0f0'}, {largeur : 12, animer : true, fillStyle : [{position : 0, couleur : '#56B37F'}, {position : 1, couleur : '#c0e674' }]}]
besoinDot	Booléen	Non	Avez-vous besoin d’afficher des points de progression ?	FAUX
pointStyle	Tableau	Non	La configuration du style de point de progression prend en charge jusqu'à deux styles de superposition. Pour garantir un affichage clair des points de progression, le premier point ajoute une ombre par défaut. Si le diamètre du premier point de progression est plus grand que la barre de progression, afin de garantir que le point de progression est complètement affiché dans le canevas, le cercle de la barre de progression dessiné doit être réduit de la différence correspondante, où l'ombre est une configuration facultative, et la valeur de shadow est `(0, 0, r/2, shadow)`	dotStyle : [{r : 24, fillStyle : '#fff', ombre : 'rgba(0,0,0,.15)'}, {r : 10, fillStyle : '#56B37F'}]

Description de la fonction Dessiner

Étant donné que la barre de progression peut être mise à jour plusieurs fois sur une page, une fois le composant instancié, vous devez appeler manuellement la méthode draw pour dessiner l'image.

Nom du paramètre	type de données	Paramètres requis	analyser
pourcentage	Nombre	Oui	Pourcentage d'arc, par exemple, si 60 est transmis, seuls les 60 % restants de l'arc seront rendus dans le sens inverse des aiguilles d'une montre.

Autres instructions

Comment définir le style de point d'arrivée de l'arc
Le paramètre lineCap peut être ajouté à n'importe quel élément de paramètre dans barStyle , par exemple : barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}]. Pour la valeur valide lineCap , veuillez consulter le document.
Doit fonctionner sur la version SDK 2.7.0 ou supérieure
Le composant a adopté la dernière méthode de rendu sur la même couche de WeChat, qui nécessite que la version du SDK ne soit pas inférieure à 2.7.0.
pointStyle
Si dotStyle contient une ombre, afin de garantir que l'ombre puisse être entièrement affichée dans toutes les zones du cercle, le rayon de la barre de progression sera automatiquement réduit.
animation de progression
Actuellement, l'animation ne fonctionne que dans la définition du dernier élément de barStyle, et l'animation de chaque image représente 2% de l'animation totale.

Effet d'affichage de texte

mode normal

Pour le code d'implémentation, veuillez vous référer à :

 <view class="garage-status">
  <canvas class="canvas" type="2d" id="progress"></canvas>
  <view class="status-ctn">
    <view class="status-count">127/127</view>
    <view class="desc-text">适用车位剩余</view>
  </view>
</view>