prefácio
Não muito tempo atrás, eu vi um pequeno programa relativamente interessante, Jingshen Muyu, que pode realizar batidas online em peixes de madeira, batidas automáticas em peixes de madeira, contas de prato de mão, tigela de canto de meditação
A função de todo o applet é relativamente pequena e simples, e já é popular há algum tempo. Não importa no mercado de aplicativos de aplicativos ou no applet, alguns desenvolvedores ganharam muito dinheiro para aliviar a ansiedade dos jovens contemporâneos. A descompressão budista é considerada entretenimento.Você pode pensar que esse tipo de aplicativo é inútil e distante dos negócios, mas, pelo contrário, em termos de expansão e extensão dos negócios, algumas pessoas ainda estão dispostas a pagar por isso.
Vamos revelar a implementação do exemplo de bater peixe de madeira neste pequeno programa
exemplo concreto
Exemplos específicos podem ser vistos flutuando na animação
código específico
Aqui está o Vuecódigo como um exemplo
<template><div class="leijia-wrap"><div class="leijia-content"> <h2>静神木鱼</h2> <div class="text">{
{count}}<span class="animatetip" v-show="isTip">功德+1</span></div> <div class="btn"> <el-button type="primary" size="mini" @click="handleClick" ref="btnClick">敲击</el-button> <el-button type="primary" size="mini" @click="handleVoince" ref="btnJinYin">{
{isVoince == true?'非静音':'静音'}}</el-button> <el-button type="danger" size="mini" @click="handleAuto">{
{onOff == true?'自动':'非自动'}}</el-button> <el-button type="info" size="mini" @click="handleClear">清除</el-button> </div></div><!--敲击音频---> <audio id="myaudio" src="../images/js-article-imgs/video/qiaoji.mp3"style="display:none"> Your browser does not support the audio element.</audio></div>
</template>
<script> export default {data() {return { count: 0, timer: null, onOff: true, isVoince: true, isTip: false}},mounted(){this.count = localStorage.getItem('count') || 0; // 获取本地存储localStorage},methods: {// 敲击handleClick() {this.count = parseInt(this.count)+1;localStorage.setItem('count',this.count);// 设置本地存储localStoragethis.isTip = true;setTimeout(()=> {
this.isTip = false;
}, 300);let music = document.getElementById("myaudio");if(this.isVoince) {music.play();}else {music.pause();}},// 控制静音还是非静音handleVoince() { let music = document.getElementById("myaudio"); if(this.isVoince) {music.play(); }else { music.pause(); } this.isVoince = !this.isVoince;}, // 重置数据,清除localStoragehandleClear(){localStorage.removeItem('count');this.count = 0;},// 自动敲打,累加handleAuto() {let music = document.getElementById("myaudio");if(this.onOff) {this.timer = setInterval(() => {this.count = parseInt(this.count)+1;this.isTip = true; setTimeout(()=> {
this.isTip = false;
}, 300);music.play();},1000)}else {clearInterval(this.timer); // 清除定时器music.pause();}this.onOff = !this.onOff;},}
} </script>
<style lang="scss" scoped> .leijia-wrap {text-align: center;margin-top: 10px;.btn {margin-top: 20px;}.text {position:relative;}.animatetip {opacity: 0;animation: showtip 1s;position:absolute;right: 320px;top: 0px;}/* 关键帧动画 */@keyframes showtip {0% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(-15px);}}} </style>
Embora o pequeno exemplo acima seja pequeno, ele inclui algum conhecimento. Para obter esse efeito, você precisa saber
analisar
1. Como realizar o acúmulo de números de controle e resolver o problema de +emenda de strings (especificamente resolver o problema parseInt())
2. Como realizar o acúmulo automático, você precisa saber como definir o temporizador setIntervale limpá- lo clearInterval
3. Controles de controle a mudança do estado do elemento , a configuração do switch
4. Ao atualizar a página, na próxima vez que você entrar e ainda reter o último estado, você precisa usar o cache local localStoragee limpar o cache local especificado localStorage.removeItem('key')
5. Como para controlar a reprodução ( ) e a pausa ( ) do audioelemento de áudio 6. Pense Para obter uma animação flutuante ascendente cumulativa, você precisa usar o quadro-chave de animaçãoplaypausecss3
O controle acima 功德加+1usa os quadros-chave de animação vuecombinados e a combinação de transparência para controlarv-showcss3
Deve-se notar que o empréstimo simples v-shownão pode ser totalmente controlado. Você também precisa pegar um emprestado setTimeout, ocultá-lo primeiro, depois exibi-lo e quanto tempo leva para ocultar o elemento por último
No applet WeChat, a lógica da implementação é semelhante. Ele usa a função de armazenamento local do WeChat. Para a animação, pode ser realizada usando a API de animação que vem com o applet.
O exemplo é relativamente simples, mas basicamente atinge a função desejada, se houver algo que você não entenda, você pode se comunicar mais
Finalmente
Recentemente, encontrei um documento VUE, que resume os vários pontos de conhecimento do VUE e os organiza em "36 habilidades que o desenvolvimento do Vue deve conhecer". O conteúdo é relativamente detalhado e a explicação de cada ponto de conhecimento também está disponível.
Amigos necessitados, você pode clicar no cartão abaixo para receber e compartilhar gratuitamente