微信小程序项目-电子木鱼

weixin_48077625

已于 2023-05-22 10:13:24 修改

阅读量1.3k

点赞数 1

分类专栏：微信小程序电子木鱼文章标签：微信小程序前端小程序

于 2023-05-21 11:57:32 首次发布

本文链接：https://blog.csdn.net/weixin_48077625/article/details/130789642

版权

微信小程序同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

电子木鱼

1 篇文章 1 订阅

订阅专栏

   基于微信小程序所开发的电子木鱼项目，十分适合作为微信小程序开发初学者在完成前端基础学习后进行练手学习项目。

一、界面展示

在这里插入图片描述

二、功能介绍

自动计数
木鱼敲击动画
文字上飘动画

三、核心代码

data: {
    gdcount:0,
    tclass:'t1',
    temp:[],
    isTouch:false
  },


  changet(){
    this.setData({tclass:'t1'})
  },

  touchgd(){
    this.setData({
      gdcount:this.data.gdcount+1,
      tclass:'t2',
      temp:this.data.temp.concat('功德+1'),
      isTouch:!this.data.isTouch
    })
    if(this.data.temp.length>=50){
      this.data.temp.splice(0,40)
    }
    console.log(this.data.temp)

    setTimeout(this.changet,500)
    setTimeout(()=>{
      this.setData({
        isTouch:!this.data.isTouch
      })
    },200)
  },

<view class="pagebg" >
    <view class="c1" >
      <text style="color: white;font-size: 80rpx;" >功德数   {{gdcount}}</text>
    </view>
    <view class="c2" >
      <view class="words" wx:for="{{temp}}" wx:key="index">{{item}}</view>
    </view>
  
    <view class="c3 " bindtap="touchgd" >
      <image src="../image/1.png" class="muyu {{isTouch?'touchmuyu':''}}" />
    </view>
</view>