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>
相关推荐
软工的小白20 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
2501_916008891 天前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °1 天前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC1 天前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser1 天前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_916008891 天前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
织_网1 天前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
yuehua_zhang1 天前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app