小程序的右侧抽屉开关动画手写效果

<template><view><button @click="openDrawer">打开抽屉</button><view v-if="showDrawer" class="drawer" :style="{ backgroundColor: bgColor }" @click="closeDrawer"><view class="drawerContent" :animation="animationData" @click.stop><view class="drawerName"><view style="font-weight: bold;" class="drawerName_title">价格区间(元)</view><view style="position: relative;"><text @click="closeDrawer" class="drawerName_icon qh-rt-single qh-rt-a-zu4416 choose-sku-close-icon"></text></view></view><!-- ... 其余内容保持不变 ... --></view></view></view>
</template><script>
export default {data() {return {showDrawer: false,animationData: {},bgColor: 'rgba(0, 0, 0, 0)',animation: null,// ... 其他数据}},methods: {openDrawer() {this.showDrawer = true;this.bgColor = 'rgba(0, 0, 0, 0)';this.$nextTick(() => {this.animation = uni.createAnimation({duration: 300,timingFunction: 'ease-out',});this.animation.translateX(0).step();this.animationData = this.animation.export();// 背景颜色渐变let opacity = 0;const bgInterval = setInterval(() => {opacity += 0.1;this.bgColor = `rgba(0, 0, 0, ${opacity})`;if (opacity >= 0.5) {clearInterval(bgInterval);}}, 30);});},closeDrawer() {this.animation.translateX('100%').step();this.animationData = this.animation.export();// 背景颜色渐变let opacity = 0.5;const bgInterval = setInterval(() => {opacity -= 0.1;this.bgColor = `rgba(0, 0, 0, ${opacity})`;if (opacity <= 0) {clearInterval(bgInterval);this.showDrawer = false;}}, 30);}}
}
</script><style lang="scss">
.drawer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: flex-end;z-index: 999;
}.drawerContent {display: flex;flex-direction: column;justify-content: space-between;height: 100%;padding-top: 140rpx;background: #fff;width: 512rpx;transform: translateX(100%); // 初始位置在屏幕右侧
}// ... 其他样式保持不变 ...
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序登录与获取手机号 (Python)

文章目录 相关术语登录逻辑登录设计登录代码 相关术语 调用接口[wx.login()]获取登录凭证&#xff08;code&#xff09;。通过凭证进而换取用户登录态信息&#xff0c;包括用户在当前小程序的唯一标识&#xff08;openid&#xff09;、微信开放平台账号下的唯一标识&#xff0…

Unity 之 【Android Unity FBO渲染】之 [Unity 渲染 Android 端播放的视频] 的一种方法简单整理

Unity 之 【Android Unity FBO渲染】之 [Unity 渲染 Android 端播放的视频] 的一种方法简单整理 目录 Unity 之 【Android Unity FBO渲染】之 [Unity 渲染 Android 端播放的视频] 的一种方法简单整理 一、简单介绍 二、FBO 简单介绍 三、案例实现原理 四、注意事项 五、简…

利用熵权法进行数值评分计算——算法过程

1、概述 在软件系统中&#xff0c;研发人员常常遇上需要对系统内的某种行为/模型进行评分的情况。例如根据系统的各种漏洞情况对系统安全性进行评分、根据业务员最近操作系统的情况对业务员工作状态进行打分等等。显然研发人员了解一种或者几种标准评分算法是非常有利于开展研…

word文档无损原样转pdf在windows平台使用python调用win32com使用pip安装pywin32

前提&#xff1a; windows环境下&#xff0c;并且安装了office套装&#xff0c;比如word,如果需要调用excel.也需要安装。在另外的文章会介绍。这种是直接调用word的。所以还原度会比较高。 需求&#xff1a; word文档转pdf,要求使用命令行形式&#xff0c;最终发布为api接口…

数据库基础知识---------------------------(1)

数据库分类 关系型数据库 以表格方式存储数据 例子&#xff1a; MySQL、Oracle、DB2、SQLserver等 特点&#xff1a; SQL结构程度较高、安全性高、查询效率较低 非关系型数据库 以键值方式存储数据 例子&#xff1a; Redis、Hbase、MongoDB等 特点&#xff1a; 查询效率…

(不用互三)AI绘画工具大比拼:Midjourney VS Stable Diffusion该如何选择?

文章目录 &#x1f4af;如何选择合适的AI绘画工具根据个人需求选择1. 您喜欢什么风格的绘画&#xff1f;2. 您想要创作什么主题的内容&#xff1f;3. 您对绘画工具的使用经验如何&#xff1f; 比较工具特点1. 工具的易用性和功能性如何&#xff1f;易用性&#xff1a;功能性&am…

Qt_自定义信号

目录 1、自定义信号的规定 2、创建自定义信号 3、带参数的信号与槽 4、一个信号连接多个槽 5、信号与槽的断开 结语 前言&#xff1a; 虽然Qt已经内置了大量的信号&#xff0c;并且这些信号能够满足大部分的开发场景&#xff0c;但是Qt仍然允许开发者自定义信号&#…

基于vue框架的宠物寄养系统3d388(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,宠物信息,宠物分类,寄养店,宠物寄养,宠物领养,家庭环境,用户宠物 开题报告内容 基于Vue框架的宠物寄养系统开题报告 一、引言 随着人们生活水平的提高和宠物文化的普及&#xff0c;宠物已成为许多家庭不可或缺的一员。因此&…

实战案例(5)防火墙通过跨三层MAC识别功能控制三层核心下面的终端

如果网关是在核心设备上面&#xff0c;还能用MAC地址进行控制吗&#xff1f; 办公区域的网段都在三层上面&#xff0c;防火墙还能基于MAC来控制吗&#xff1f; 采用正常配置模式的步骤与思路 &#xff08;1&#xff09;配置思路与上面一样 &#xff08;2&#xff09;与上面区…

万象奥科参展“2024 STM32全国巡回研讨会”—深圳站、广州站

9月3日-9月5日&#xff0c;万象奥科参展“2024 STM32全国巡回研讨会”— 深圳站、广州站。此次STM32研讨会将会走进全国11个城市&#xff0c;展示STM32在智能工业、无线连接、边缘人工智能、安全、图形用户界面等领域的产品解决方案及多样化应用实例&#xff0c;深入解读最新的…

Linux系统部署SmartKG(知识图谱安装)

基本要求 #docker需要高版本 Docker version 20.10.14, build a224086docker 20.10.14离线安装 SmartKG官网 官方详细文档 下载部署包 SmartKG官网 准备部署 #上传到服务器 [roottest-server01 opt]# ll SmartKG-master.zip -rw-r--r-- 1 root root 79708691 Sep 11 17:4…

c++基类和派生类对象的赋值转换——赋值兼容规则

1.引出 如下场景&#xff1a; 由于b是double类型&#xff0c;所以赋值给int类型的引用前&#xff0c;要先进行隐式类型转换&#xff0c;这中间会生成临时对象&#xff0c;类是对象具有常性&#xff0c;所以int&之前应该加上const。 但是下面的场景&#xff1a; 没有出现报…

亚马逊测评自建团队与工作室的五大优势亮点,打造高权重评价系统

亚马逊上的产品评价&#xff0c;其实就是为了让买家们说出他们的真实想法&#xff0c;这样卖家就能知道怎么把东西做得更好&#xff0c;让买家更满意&#xff0c;还能让卖东西的招数更给力。效果有以下几点&#xff1a; 1. 商品更靠谱&#xff1a;买家说好&#xff0c;大家就更…

基于SSM的校园志愿者管理系统的设计与实现---附源码76245

摘 要 本文基于SSM框架&#xff0c;设计并实现了一套校园志愿者管理系统&#xff0c;旨在提高校园志愿服务管理的效率和质量。系统主要包括管理员、志愿者和活动发布者三大角色&#xff0c;涵盖了志愿者管理、活动管理、公告管理等功能模块&#xff0c;采用了MySQL作为数据库&…

【计算机组成原理】详细解读带符号整数在计算机中的运算

有符号整数的运算 导读一、补码的优势二、补码的加法运算三、补码的减法运算四、原码、反码、补码的特性结语 导读 大家好&#xff0c;很高兴又和大家见面啦&#xff01;&#xff01;&#xff01; 经过前面的介绍&#xff0c;我们已经初步认识了有符号整数的三种表示形式&…

NPU 与 GPU 相比,有什么差别?| 技术速览

编者按&#xff1a; 随着2024年被业界誉为“AI PC元年”&#xff0c;各大笔记本电脑厂商纷纷推出搭载NPU的全新AI PC&#xff0c;而在介绍产品性能时&#xff0c;“NPU”一词频频被提及。但NPU和我们所熟知的GPU之间的区别究竟是什么&#xff1f; 我们今天为大家分享的这篇文章…

电水壶自复位热断循环测试合规性

在家用电器安全标准中,电水壶的安全性尤为重要,尤其是涉及热保护装置的部分。电水壶在日常使用中频繁接触高温水,极端情况下,温度可能异常升高。因此,为了确保用户的安全,热保护装置必须可靠工作。本文将探讨自复位热断路器(TCO)在电水壶中的作用,以及在100次循环测试…

如何在 Selenium 中获取网络调用请求?

引言 捕获网络请求对于理解网站的工作方式以及传输的数据至关重要。Selenium 作为一种 Web 自动化工具,可以用于捕获网络请求。本文将讨论如何使用 Selenium 在 Java 中捕获网络请求并从网站检索数据。 我们可以使用浏览器开发者工具轻松捕获网络请求或日志。大多数现代 Web…

creating chat agent with langchain and openai getting no attribute error

题意&#xff1a; 使用 LangChain 和 OpenAI 创建聊天代理时遇到“没有属性错误”&#xff08;Getting "no attribute" error when creating a chat agent with LangChain and OpenAI&#xff09; 问题背景&#xff1a; Im trying to test a chat agent using the …

房产销售系统|基于java和vue的房产销售系统(源码+数据库+文档)

房产销售|房地产|卖房系统 目录 基于java和vue的房产销售系统 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xff0c;…