mp progress
支持在wepy中是用api方式
Una herramienta enfocada a implementar barras de progreso circulares en programas pequeños
Actualmente, los miniprogramas tienen muchos componentes de interfaz de usuario de terceros, que básicamente se introducen y utilizan en forma de componentes. Si el estilo del proyecto es más cercano al de terceros, estos conjuntos completos de bibliotecas de componentes de terceros son más convenientes. si solo usa ciertos componentes de la biblioteca de UI de terceros. De ser así, no sería razonable instalar una biblioteca muy grande.
El tamaño del archivo de destino de mp-progress es inferior a 7 KB. El conveniente método de llamada js y el método de escritura de etiquetas de lienzo nativo son muy adecuados para proyectos que desean mantener un alto grado de control.
$ npm install mp-progress --save
De acuerdo con los requisitos del documento, se admiten las versiones de biblioteca básica 2.7.0 y superiores. El mejor efecto es utilizar la biblioteca básica más reciente.
El uso del subprograma nativo de WeChat para introducir paquetes npm requiere una configuración adicional. Para obtener más detalles, consulte https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13.
Introduzca componentes en la página correspondiente, inicialice datos y use componentes en wxml
Debido a diferencias en la implementación de los componentes, este método no es aplicable en 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>
Este método sigue el principio de enlace bidireccional de datos. Cuando la página cambia el porcentaje, mp-progress actualizará automáticamente la vista.
Este método es adecuado para wepy, pero debe inicializarse en la función de devolución de llamada onReady.
La unidad pasada es rpx , es decir, si el ancho del lienzo es 400 rpx, entonces se pasa 400 y el tamaño real se calculará automáticamente más adelante.
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>
| Efecto | analizar gramaticalmente |
|---|---|
 | Modo normal (predeterminado) |
 | Modo de porcentaje (solo necesita pasar el porcentaje según sea necesario, consulte la descripción del parámetro) |
| Nombre del parámetro | tipo de datos | Parámetros requeridos | analizar gramaticalmente | Lista |
|---|---|---|---|---|
| objetivo | Objeto | Sí | Contexto de la página | este |
| ID de lienzo | Cadena | Sí | La identificación del lienzo de la página. | progreso |
| lienzoTamaño | Objeto | Sí | El tamaño del lienzo, la unidad correspondiente es rpx, solo necesitas pasar el número | {ancho: 200, alto: 300} |
| por ciento | Número | No | De forma predeterminada, el círculo se calcula y se muestra según 360 grados. Si se pasa el 80%, el arco de semicírculo máximo se dibujará automáticamente según el tamaño del lienzo. El valor válido está entre 50% y 100%. | 100 |
| estilo de barra | Formación | Sí | El estilo de progreso del arco se representa según el orden de posición de los elementos de la matriz. Generalmente, la configuración del primer elemento es el color de fondo que cubre todo el arco, y la configuración del segundo elemento es para representar el arco según el porcentaje de progreso. fillStyle puede ser un color normal o un color degradado. Para usar el color degradado, debe pasar la información de posición y color de cada punto en el formato de una matriz. | [{ancho: 12, fillStyle: '#f0f0f0'}, {ancho: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}] |
| necesidadPunto | booleano | No | ¿Necesitas mostrar los puntos de progreso? | FALSO |
| estilopunto | Formación | No | La configuración del estilo de los puntos de progreso admite hasta dos estilos de superposición. Para garantizar una visualización clara de los puntos de progreso, el primer punto agrega una sombra de forma predeterminada. Si el diámetro del primer punto de progreso es mayor que la barra de progreso, para garantizar que el punto de progreso se muestre completamente en el lienzo, el círculo de la barra de progreso dibujada debe reducirse en la diferencia correspondiente, donde la sombra es una configuración opcional. y el valor de la sombra es (0, 0, r/2, shadow) | dotStyle: [{r: 24, fillStyle: '#fff', sombra: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}] |
Teniendo en cuenta que la barra de progreso puede actualizarse varias veces en una página, después de crear una instancia del componente, debe llamar manualmente al método draw para dibujar la imagen.
| Nombre del parámetro | tipo de datos | Parámetros requeridos | analizar gramaticalmente |
|---|---|---|---|
| porcentaje | Número | Sí | Porcentaje de arco, por ejemplo, si se pasa 60, solo el 60% restante del arco se representará en sentido antihorario. |
Cómo configurar el estilo del punto final del arco
El parámetro lineCap se puede agregar a cualquier elemento de parámetro en barStyle , por ejemplo: barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}]. Para conocer el valor válido lineCap , consulte el documento.
Debe ejecutarse en la versión 2.7.0 o superior del SDK
El componente ha adoptado el último método de renderizado en la misma capa de WeChat, que requiere que la versión del SDK no sea inferior a 2.7.0.
estilopunto
Si dotStyle contiene sombra, para garantizar que la sombra se pueda mostrar completamente en todas las áreas del círculo, el radio de la barra de progreso se reducirá automáticamente.
animación de progreso
Actualmente la animación solo funciona en la definición del último elemento de barStyle, y la animación de cada cuadro es el 2% de la animación total.
Efecto de visualización de texto
Para conocer el código de implementación, consulte:
<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>
Comentarios de problemas
