微信小程序-功德木鱼（含设置面板功能）

weixin_48077625

于 2024-04-28 23:07:36 发布

阅读量1.1k

点赞数 8

文章标签：微信小程序前端小程序

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

版权

   基于微信小程序所开发的电子木鱼项目，十分适合作为微信小程序开发初学者在完成前端基础学习后进行练手学习项目。
   ##功能亮点：计数器、敲击震动效果、设置面板（自定义漂浮文字内容、可选择文字颜色、可选择木鱼样式）

一、界面展示

在这里插入图片描述

二、功能介绍

自动计数
木鱼敲击动画
文字上飘动画
敲击震动
设置面板
自定义漂浮文字
可选择字体颜色
可选择木鱼样式

三、核心代码

setting(){
    this.setData({
      isSetting:true
    })
  },
  // 设置漂浮文字
  input_setText(e){
    this.tempgongdeText = e.detail.value
    console.log(this.tempgongdeText)
  },

  // 设置文字颜色
  setTextColor_selectColor(e){
    var val = e.currentTarget.dataset.val
    if(val == ''){
      this.tempTextColor = this.data.textColor
      this.setData({
        priTempTextColor:this.data.textColor
      })
    }else{
      this.tempTextColor = val
      this.setData({
        priTempTextColor:this.tempTextColor
      })
    }
  },

  // 设置木鱼颜色
  setMuyu_selectImage(e){
    var imageSrc =  e.target.id
    
    if(imageSrc == ''){
      this.tempImageSrc = this.data.imageSrc
    }else{
      this.tempImageSrc = imageSrc
    }

    this.setData({
      priTempImageSrc:this.tempImageSrc
    })
  },

<!--pages/demo2/demo2.wxml-->


<view class="bg">

  <view class="content">
    功德数: {{ count }}
  </view>
  <view class="gongdeArea">
    <view wx:for="{{ list }}" wx:key="*" class="gongdeText {{textColor}} " >{{ item }}</view>
  </view>
  <view class='muyuArea'>
    <view class="muyu {{isTouch?'muyuAutoPlay':'' }}" hover-class="click" hover-stay-time="100" bind:tap="click">
      <image src="/images/{{imageSrc}}.png" mode="" />
    </view>
  </view>

  <view class="switchArea">
    <view class="bgSwitch {{isTouch?'bgSwitchChange':'' }} " bind:tap="sliderTouch">
      <view class="slider  {{isTouch?'sliderTouch':'' }}"></view>
    </view>
    <view class="SwitchText"> {{ isTouch?'自动':'手动'  }} </view>
  </view>
</view>

<view class="btnArea">
  <image src="/images/设置.png" bind:tap="setting" mode="" />
</view>

<!-- 设置页面 -->
<view class="settingPage" wx:if="{{ isSetting }}">

  <view class="setText">
    <view>敲击文字</view>
    <input type="text" class="setText_input" bindinput="input_setText" />
  </view>

  <view class="setTextColor">
    <view>文字颜色</view>
    <view class="setTextColor_ColorBar">
      <view wx:for="{{ textColorList }}" class="colorBar_colorArea {{ item.color == priTempTextColor?'colorBar_colorArea_selectd':'' }} "   wx:key="*" bind:tap="setTextColor_selectColor" data-val="{{ item.color }}" >
        <view class="setTextColor_ColorBar_Color" style="background-color: {{ item.color }};"></view>
        <view>{{ item.name }}</view>
      </view>
    </view>

  </view>

  <view class="setMuyu">
    <view>选择木鱼</view>
    <view class="setMuyu_Image">
      <image wx:for="{{ muyuList }}"  class="setMuyu_Image_Comstyle {{item == priTempImageSrc ?'setMuyu_Image_select':'' }}" src="/images/{{ item }}.png" bind:tap="setMuyu_selectImage" id="{{ item }}" wx:key="*" mode=""  />
    </view>
  </view>

  <view class="setBtn">
    <view class="btn" data-val="1" bind:tap="tap_setBtn"> 确定 </view>
    <view class="btn" data-val="0" bind:tap="tap_setBtn"> 取消 </view>
  </view>

</view>