微信小程序实现敲木鱼

最新推荐文章于 2024-01-12 10:48:26 发布

白小筠

最新推荐文章于 2024-01-12 10:48:26 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_57907966/article/details/128603894

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用原生微信小程序编写的
直接贴代码
wxml文件

<view class="title">您的功德：{{value}}</view>
<view id="{{id}}">功德+1</view>
<image  src="https://clemmensen.top/static/muyu.png" bindtap="click" class="image {{classStyle}}"></image>
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" ></audio>
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="https://clemmensen.top/static/28297622582.mp3" id="bg" ></audio>

js文件

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    classStyle: '',
    value:0,
    id:'default',
    bg:null,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {

    this.audioCtx = wx.createAudioContext('myAudio');
    this.bg=wx.createAudioContext('bg');
    this.bg.play();
  },

  click() {
    this.setData({
      classStyle: 'animal',
      id:'font',
      value:this.data.value+1,
    });
    this.setData({
      src:'https://clemmensen.top/static/muyu.mp3',
    });
    this.audioCtx.play();

    
    setTimeout(() => {
      this.setData({
        classStyle: '',
        //id:'default'
      });
    }, 100);
    setTimeout(() => {
      this.setData({
        id:'default'
      });
    }, 500);
  },
})

wxss样式文件

/* pages/muyu/index.wxss */
page{
  background: black;
}
.animal{
  transform:scale(1.05);
}
.image{
  width:304rpx;
  height:221rpx ;
  margin-left: 223rpx;
  margin-top: 20rpx;
}
#font{
  color:white;
  height: 200px;
  animation: mymove 1s;
  position:absolute;
  opacity:0;
  margin-left: 250rpx;
}
#default{
  color:white;
  height: 200px;
  position:absolute;
  opacity:0;
  margin-left: 250rpx;
}
@keyframes mymove {
  from {top:100px;opacity:100;}
  to {top:50px;opacity:0;}
}
.title{
  margin-left: 250rpx;color:white; margin-top: 250rpx;
}