uniapp,页面当有按钮的时候,可以做一个动态的效果

效果:

这个是当点着按钮的时候没有松开按钮的效果(没有阴影)
这个是当松开按钮的效果(有阴影)

原理讲解:

这段代码实现的业务逻辑是在一个Vue组件中控制"现金"按钮的阴影效果。具体来说,它通过绑定触摸事件(@touchstart@touchend)来改变按钮的阴影状态。当用户触摸按钮时,按钮的阴影会消失;当用户停止触摸时,阴影会重新出现。这种效果可以增强用户界面的交互性,给用户提供直观的反馈,表明按钮已被按下。

具体步骤如下:

  1. 数据定义 :在组件的data函数中定义了一个名为showShadow的变量,初始值为true。这个变量用于控制按钮阴影的显示状态。

  2. 事件处理

    • handleTouchStart方法会在用户开始触摸按钮时被调用,将showShadow设置为false,意味着阴影应该被隐藏。
    • handleTouchEnd方法会在用户停止触摸按钮时被调用,将showShadow重新设置为true,意味着阴影应该被显示。
  3. 样式绑定 :在模板中,按钮的style属性通过:style绑定动态地根据showShadow的值来设置。如果showShadowtrue,则应用有阴影的样式;如果为false,则应用无阴影的样式。

这种方式利用Vue的响应式数据绑定,使得当showShadow变量的值改变时,Vue会自动更新DOM,从而改变按钮的样式。这种实现方法比直接操作DOM元素的样式更符合Vue的设计原则,因为它通过改变数据来驱动视图的更新,而不是直接操作视图。

代码:

data函数中添加一个变量:
javascript 复制代码
data() {
    return {
        // 其他数据...
        showShadow: true,
    };
},
在方法中更新这个变量:
javascript 复制代码
methods: {
    handleTouchStart() {
        this.showShadow = false;
    },
    handleTouchEnd() {
        this.showShadow = true;
    },
    // 其他方法...
},
在模板中使用这个变量来绑定样式:
javascript 复制代码
<view @touchstart="handleTouchStart" @touchend="handleTouchEnd"
    :style="showShadow ? 'box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);' : 'box-shadow: none;'"
    style="flex-grow: 1; background-color: #ffb319; display: flex; align-items: center; justify-content: center;">
    <view class="texttt" style="color: black; font-size: 50rpx;">现金</view>
</view>
相关推荐
FinelyYang13 小时前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
浩星13 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
IT 前端 张13 小时前
uni-app在安卓设备上获取 (WIFI 【和】以太网) ip 和 MAC
android·tcp/ip·uni-app
F2E_Zhangmo16 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
儿歌八万首16 小时前
UniApp 加载 Web 页面解决方案
javascript·vue.js·uni-app
2501_9159184116 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
半世浮生17 小时前
uniapp开发微信路由踩坑
前端·uni-app
2501_9159090619 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app