微信小程序自定义弹窗组件

news/2024/6/24 7:00:24/文章来源:https://blog.csdn.net/weixin_43764828/article/details/137268781

业务背景:弹窗有时字体较多,超过7个字,不适用wx.showToast.
在这里插入图片描述
组件代码

<view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"><view class="toast-content" ><view class="toast-img"><block wx:if="{{type==='success'}}"><image class="toast-icon" src="/images/correct.png" /></block><block wx:if="{{type==='fail'}}"><image class="toast-icon" src="/images/warn.png" /></block></view><view class="toast-title">{{title}}</view><view style="width:100%;border-top: 1rpx solid #ddd;"></view><view bindtap="handleClose" style="width: 100%;text-align: center;color: #666;line-height: 80rpx;">确 定</view></view>
</view>

/* components/toast/toast.wxss */

.toast-box {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 11;display: none;background: rgba(0, 0, 0, .6);opacity: 0;}.show{display: block;}.toast-content {position: absolute;left: 50%;top: 45%;width:600rpx;/*height: 250rpx;*/border-radius: 10rpx;box-sizing: bordre-box;transform: translate(-50%, -50%);background: white;}.toast-img{width: 100%;height: 100rpx;padding-top: 15rpx;box-sizing: bordre-box;text-align: center;}.toast-icon{width: 100rpx;height: 100rpx;}.toast-title {width: 100%;padding: 30rpx;line-height: 45rpx;color: #666;text-align: center;font-size: 28rpx;box-sizing: border-box;}

// components/toast/toast.js

Component({properties: {},data: {type: 'fail',title: '',isShow: false,animationData: ''},methods: {showToast: function (data) {const that = this;if (this._showTimer) {clearTimeout(this._showTimer)}if (this._animationTimer) {clearTimeout(this._animationTimer)}// display需要先设置为block之后,才能执行动画this.setData({title: data.title,type: data.type,isShow: true,});this._animationTimer = setTimeout(() => {const animation = wx.createAnimation({duration: 500,timingFunction: 'ease',delay: 0})animation.opacity(1).step();that.setData({animationData: animation.export(),})}, 50)this._showTimer = setTimeout(function () {that.hideToast();if (data.compelete && (typeof data.compelete === 'function')) {data.compelete()}}, data.duration)},handleClose(){this.hideToast();},hideToast: function () {if (this._hideTimer) {clearTimeout(this._hideTimer)}let animation = wx.createAnimation({duration: 200,timingFunction: 'ease',delay: 0})animation.opacity(0).step();this.setData({animationData: animation.export(),})this._hideTimer = setTimeout(() => {this.setData({isShow: false,})}, 0)}}})

引用部分

// json{"usingComponents": {"vas-toast": "../../components/toast/toast"}
}
// html
<vas-toast id='toast'></vas-toast>
jsonShow: function () {this.prompt = this.selectComponent("#toast");},
that.prompt.showToast({type: 'fail',title: res.data.errmsg,duration: 4000,compelete: function () {}})

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

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

相关文章

Go-Gin中优雅的实现参数校验,自定义错误消息提示

问题描述 在参数校验的时候我们一般会基于"github.com/go-playground/validator/v10"这个库给结构体加标签实现校验参数&#xff0c;当参数校验错误的时候&#xff0c;他的提示一般是英文的&#xff0c;怎么自定义参数错误提示呢&#xff1f;跟着我一步步来 注册校…

抖音无水印视频采集软件|视频批量提取工具

轻松获取抖音无水印视频&#xff0c;一键提取&#xff0c;快速下载&#xff01; 正文&#xff1a; 想要获取抖音上的精彩视频&#xff0c;但又苦于找不到无水印的版本&#xff1f;现在&#xff0c;有了我们的抖音无水印视频采集软件&#xff0c;Q:290615413您可以轻松实现关键…

vue结合Elempent-Plus/UI穿梭框更改宽度以及悬浮文本显示

由于分辨率不同会导致文本内容显示不全&#xff0c;如下所示&#xff1a; 因此需要 1、悬浮到对应行上出现悬浮信息 实现代码如下所示&#xff1a; 这里只演示Vue3版本代码&#xff0c;Vue2版本不再演示 区别就在插槽使用上Vue3使用&#xff1a;#default“”&#xff1b;Vu…

Discuz! X3.5苗木_苗木网_苗木价格_苗木求购信息_苗木批发网模板utf-8

适合做苗木行业平台苗木网站、苗木信息网,提供苗木报价、各地苗木求购信息、绿化苗木采购招标、苗木基地展示、苗木百科知识、花木交易及苗木资讯、各地苗木信息网络行情。解压上传到template目录下&#xff0c;后台安装即可&#xff0c;包含PC手机端模板 下载地址&#xff1a;…

1.Git是用来干嘛的

Git就是一个文件管理系统&#xff0c;这样说吧&#xff0c;当多个人同时在操作一个文件的同时&#xff0c;很容易造成紊乱&#xff0c;git就是保证文件不紊乱产生的 包括集中式管理系统和分布式管理系统 听懂了&#xff0c;集中式管理系统就是从中央服务器上下载最新的版本文件…

OSError: Can‘t load tokenizer for ‘bert-base-chinese‘

文章目录 OSError: Cant load tokenizer for bert-base-chinese1.问题描述2.解决办法 OSError: Can’t load tokenizer for ‘bert-base-chinese’ 1.问题描述 使用from_pretrained()函数从预训练的权重中加载模型时报错&#xff1a; OSError: Can’t load tokenizer for ‘…

CentOS 7 下离线安装RabbitMQ教程

CentOS 7 下安装RabbitMQ教程一、做准备&#xff08;VMWare 虚拟机上的 CentOS 7 镜像 上安装的&#xff09; &#xff08;1&#xff09;准备RabbitMQ的安装包&#xff08;rabbitmq-server-3.8.5-1.el7.noarch&#xff09;下载地址mq https://github.com/rabbitmq/rabbitmq-se…

Redis缓存设计与性能优化【缓存和数据库不一致问题,解决方案:1.加过期时间这样可以一段时间后自动刷新 2.分布式的读写锁】

Redis缓存设计与性能优化 缓存与数据库双写不一致 缓存与数据库双写不一致 在大并发下&#xff0c;同时操作数据库与缓存会存在数据不一致性问题 1、双写不一致情况 2、读写并发不一致 解决方案&#xff1a; 1、对于并发几率很小的数据(如个人维度的订单数据、用户数据等)&a…

Taro+vue3 监听当前的页面滚动的距离

1.需求 想实现一个这样的效果 一开始这个城市组件 是透明的 在顶部 的固定定位 当屏幕滑动的时候到一定的距离 将这个固定的盒子 背景颜色变成白色 2.Taro中的滚动 Taro中的滚动 有固定的api 像生命周期一样 这个生命周期是 usePageScroll import Taro, { useDidShow, useP…

聚观早报 | 蔚来推出油车置换补贴;iPhone 16 Pro细节曝光

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月02日消息 蔚来推出油车置换补贴 iPhone 16 Pro细节曝光 小米SU7创始版第二轮追加开售 OpenAI将在日本设立办事…

Flutter应用在App Store上架的完整指南

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

极简7照训练法,奇趣相机引领儿童AI摄影潮流

近日&#xff0c;奇趣未来推出一款专注于儿童AI摄影市场的微信小程序——奇趣相机&#xff0c;搭载了专为中国儿童精心研发的AIGC大模型&#xff0c;精准捕捉并贴合亚洲儿童人脸特征&#xff0c;让每一个孩子的笑容都能被完美定格。它不仅涵盖了从3岁至12岁各个年龄段的儿童摄影…

Three.js阴影贴图

生成阴影贴图的步骤如下&#xff1a; 从光位置视点&#xff08;阴影相机&#xff09;创建深度图。从相机的角度进行屏幕渲染在每个像素点&#xff0c;将阴影相机的MVP矩阵计算出的深度值与深度图值进行比较如果深度图值较低&#xff0c;则说明该像素点存在阴影 &#xff0c;因…

【FTP,EMail】

文章目录 FTPFTP&#xff1a;文件传输协议FTP: 控制连接与数据连接分开FTP命令、响应 EMail电子邮件&#xff08;EMail&#xff09;邮件服务器EMail: SMTP [RFC 2821]SMTP&#xff1a;总结 FTP FTP&#xff1a;文件传输协议 向远程主机上传输文件或从远程主机接收文件。客户/服…

【OpenCV-颜色空间】

OpenCV-颜色空间 ■ RGB■ BGR■ HSV■ HSL■ HUE■ YUV ■ RGB ■ BGR BGR 就是RGB R和B调换位置。 OpenCV 默认使用BGR ■ HSV ■ HSL ■ HUE ■ YUV

2024年最新版FL Studio21.2.3 Build 4004 for Mac 版激活下载和图文激活教程

FL studio21中文别名水果编曲软件&#xff0c;是一款全能的音乐制作软件&#xff0c;包括编曲、录音、剪辑和混音等诸多功能&#xff0c;让你的电脑编程一个全能的录音室&#xff0c;它为您提供了一个集成的开发环境&#xff0c;使用起来非常简单有效&#xff0c;您的工作会变得…

每日一题:c语言实现n的阶乘

目录 一、要求 二、代码 三、结果 一、要求 实现n的阶乘&#xff0c;已知n&#xff01;1*2*3*…*n 二、代码 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>int main() {//初始化变量n为要求的几阶&#xff0c;jiecheng存储结果的&#xff0c;初始化为1…

基于深度学习的停车场车辆检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 上图测试结果如下图所示&#xff1a; 2.算法运行软件版本 matlab2022a 3.部分核心程序 image imread(image_test\test.jpg); image2 image;%图…

UE4_碰撞_射线检测不到物体原因及跳不到圈内的问题

UseSimpleAsComplex 和 UseComplexAsSimple 标记的作用和使用时间。 虚幻引擎 4 中有简单和复杂碰撞形态。 简单碰撞 是基础&#xff0c;如盒体、 球体、胶囊体和凸包。 复杂碰撞 是给定对象的三角网格图。 虚幻引擎 4 会默认创建简单和复杂两种形态&#xff0c;然后基于用户需…

HarmonyOS 应用开发之分布式数据对象跨设备数据同步

场景介绍 传统方式下&#xff0c;设备之间的数据同步&#xff0c;需要开发者完成消息处理逻辑&#xff0c;包括&#xff1a;建立通信链接、消息收发处理、错误重试、数据冲突解决等操作&#xff0c;工作量非常大。而且设备越多&#xff0c;调试复杂度也将同步增加。 其实设备…