mp progress Download - mp progress Download do código-fonte

mp progress

Código-Fonte de IA

支持在wepy中是用api方式

Baixar

mp-progresso

Uma ferramenta focada na implementação de barras de progresso circulares em pequenos programas

por que

Atualmente, os miniprogramas possuem muitos componentes de UI de terceiros, que são basicamente introduzidos e usados na forma de componentes. Se o estilo do projeto estiver mais próximo do de terceiros, então esses conjuntos completos de bibliotecas de componentes de terceiros são mais convenientes. se você usar apenas determinados componentes da biblioteca de UI de terceiros. Nesse caso, não seria razoável instalar uma biblioteca muito grande.

O tamanho do arquivo de destino do mp-progress é inferior a 7 KB. O conveniente método de chamada js e o método nativo de gravação de tag canvas são muito adequados para projetos que desejam manter um alto grau de controle.

Instalar

 $ npm install mp-progress --save

Requisitos básicos da biblioteca

De acordo com os requisitos do documento, as versões 2.7.0 e superiores da biblioteca básica são suportadas. O melhor efeito é usar a biblioteca básica mais recente.

Miniprograma nativo WeChat

Usar o miniaplicativo nativo do WeChat para introduzir pacotes npm requer configuração adicional. Para obter detalhes, consulte https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13.

Chamada em modo componente (simples e fácil de usar)

Introduzir componentes na página correspondente, inicializar dados e usar componentes em wxml

Devido a diferenças na implementação do componente, este método não é aplicável no 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 segue o princípio da ligação bidirecional de dados. Quando a porcentagem da página muda, o mp-progress atualizará automaticamente a visualização.

Chamada de API (adequada para quem precisa construir novos componentes em cima do mp-progress)

Este método é adequado para wepy, mas deve ser inicializado na função de retorno de chamada onReady.

A unidade passada é rpx , ou seja, se a largura da tela for 400rpx, então 400 é passado e o tamanho real será calculado automaticamente posteriormente.

 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>

modo de exibição

Efeito	analisar
	Modo normal (padrão)
	Modo percentual (você só precisa passar a porcentagem conforme necessário, consulte a descrição do parâmetro)

Descrição do parâmetro

Nome do parâmetro	tipo de dados	Parâmetros obrigatórios	analisar	Lista
alvo	Objeto	sim	Contexto da página	esse
ID da tela	Corda	sim	O id da tela da página	progresso
tamanho da tela	Objeto	sim	O tamanho da tela, a unidade correspondente é rpx, basta passar o número	{largura: 200, altura: 300}
por cento	Número	não	Por padrão, o círculo é calculado e exibido de acordo com 360 graus. Se 80% for passado, o arco máximo do semicírculo será desenhado automaticamente com base no tamanho da tela.	100
estilobarra	Variedade	sim	O estilo de progresso do arco é renderizado de acordo com a ordem de posição dos elementos da matriz. Geralmente, a configuração do primeiro elemento é a cor de fundo que cobre todo o arco, e a configuração do segundo elemento é para renderizar o arco de acordo com a porcentagem de progresso. fillStyle pode ser uma cor normal ou uma cor gradiente. Para usar a cor gradiente, você precisa passar as informações de posição e cor de cada ponto no formato de um array.	[{largura: 12, fillStyle: '#f0f0f0'}, {largura: 12, animação: true, fillStyle: [{posição: 0, cor: '#56B37F'}, {posição: 1, cor: '#c0e674' }]}]
precisaDot	Booleano	não	Você precisa exibir pontos de progresso?	falso
pontoStyle	Variedade	não	A configuração do estilo do ponto de progresso suporta até dois estilos de sobreposição. Para garantir a exibição clara dos pontos de progresso, o primeiro ponto adiciona uma sombra por padrão. Se o diâmetro do primeiro ponto de progresso for maior que a barra de progresso, para garantir que o ponto de progresso seja completamente exibido na tela, o círculo da barra de progresso desenhado deve ser reduzido pela diferença correspondente, onde a sombra é uma configuração opcional, e o valor da sombra é `(0, 0, r/2, shadow)`	dotStyle: [{r: 24, fillStyle: '#fff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

Desenhar descrição da função

Considerando que a barra de progresso pode ser atualizada várias vezes em uma página, após a instanciação do componente, é necessário chamar manualmente o método draw para desenhar a imagem.

Nome do parâmetro	tipo de dados	Parâmetros obrigatórios	analisar
percentagem	Número	sim	Porcentagem do arco, por exemplo, se 60 for passado, apenas os 60% restantes do arco serão renderizados no sentido anti-horário.

Outras instruções

Como definir o estilo do ponto final do arco
O parâmetro lineCap pode ser adicionado a qualquer item de parâmetro em barStyle , por exemplo: barStyle: [{width: 12, lineCap: 'round', fillStyle: '# lineCap '}].
Deve ser executado no SDK versão 2.7.0 ou superior
O componente adotou o método de renderização de mesma camada mais recente do WeChat, que exige que a versão do SDK não seja inferior a 2.7.0
pontoStyle
Se dotStyle contiver sombra, para garantir que a sombra possa ser totalmente exibida em todas as áreas do círculo, o raio da barra de progresso será automaticamente reduzido.
animação de progresso
Atualmente a animação só funciona na definição do último elemento do barStyle, e a animação de cada quadro é 2% do total da animação.

Efeito de exibição de texto

modo normal

Para código de implementação, 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>