微信小程序 弹窗自定义的代码

这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下

微信小程序 弹窗

首先wxml代码:

暂无有关信息点击此处  

登录后复制

注:hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

.myToast{ width:240rpx; height:130rpx; line-height: 130rpx; margin:80rpx 35%; border-radius:20rpx; background-color: rgb(114,113,113); color:rgb(255,255,255); font-size: 36rpx; text-align: center; position: absolute; z-index: 100; opacity: 0.85;}

登录后复制

js:

Page({ data:{  nullHouse:true, //先设置隐藏    }, onLoad:function(options){   // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){  // 页面渲染完成 }, onShow:function(){  // 页面显示 }, onHide:function(){  // 页面隐藏 }, onUnload:function(){  // 页面关闭 }, clickArea:function(){  var that = this;  this.setData({  nullHouse:false, //弹窗显示  })   setTimeout(function(){  that.data.nullHouse = true, //1秒之后弹窗隐藏   },1000) },})

登录后复制

 注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

微信小程序的消息提示框的实现

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

以上就是微信小程序 弹窗自定义的代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1745607.html

(0)
上一篇 2025年2月19日 23:20:27
下一篇 2025年2月19日 23:20:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 湖北健康码出现弹窗去社区报备就能消除吗

    四五月份因为正式出游的好时机,所以大大小小的景点都人员爆满,但是由于时下情况特殊,一些地区为了更好地管控人员,纷纷将各省市的健康码升级,湖北也不例外,下面小编就和大家一起看看湖北健康码出现弹窗去社区报备就能消除吗。 湖北健康码出现弹窗去社区…

    2025年5月21日
    315.8K00
  • 湖北健康码出现弹窗要做核酸检测吗

    湖北健康码出现弹窗要做核酸检测吗是很多人都好奇的,毕竟四五月份因为正式出游的好时机,所以大大小小的景点都人员爆满,但是由于时下情况特殊,一些地区为了更好地管控人员,纷纷将各省市的健康码升级,湖北也不例外。 湖北健康码出现弹窗要做核酸检测吗 …

    2025年5月21日
    411.4K00
  • 湖北健康码出现弹窗怎么恢复绿码

    湖北健康码出现弹窗怎么恢复绿码是大家常聊的,毕竟健康码是时下人们出行的时候必备的物件,但由于四五月份正是全年人们出游的最佳时机,所以为了更好地管理往来人员,各省市将自己的健康码升级,湖北也是这样,下面小编就和大家一起看看湖北健康码弹窗处理需…

    2025年5月21日
    726.8K00
  • 浏览器如何启用java小程序

    首先确认电脑已经安装了java程序,可以在开始菜单的”所有程序”中找到它 如果你的java安装已经很长时间了,建议先进行更新;如果是新安装的则直接切换到”安全”选项,并勾选“启用浏览器中的Ja…

    2025年5月3日 编程技术
    000
  • UniApp实现小程序与原生应用的无缝衔接

    uniapp是一款跨平台的开发框架,可以将小程序与原生应用进行无缝衔接。本文将介绍如何利用uniapp实现小程序与原生应用的衔接,并给出相应的代码示例。 UniApp是一种基于Vue.js框架的开发工具,它的特点是可以统一开发和管理H5、小…

    编程技术 2025年5月1日
    000
  • uniapp如何实现小程序和H5的快速转换

    uniapp如何实现小程序和H5的快速转换,需要具体代码示例 近年来,随着移动互联网的发展和智能手机的普及,小程序和H5成为了不可或缺的应用形式。而uniapp作为一个跨平台的开发框架,可以在一套代码的基础上,快速实现小程序和H5的转换,大…

    2025年5月1日
    000
  • 利用uniapp实现弹窗提示功能

    标题:利用uniapp实现弹窗提示功能 随着移动互联网的发展,APP开发越来越普及。而uniapp作为一款前端开发框架,为开发者提供了在多个平台上快速开发APP的能力。在APP开发中,弹窗提示功能是非常常见和重要的功能之一。本文将介绍如何利…

    2025年5月1日
    000
  • 解密为何写代码不等同于擅长App开发

    编写代码是app开发过程中的关键步骤,但仅凭编写代码的技能并不能说明一个人擅长app开发。这里有几个原因可以解释这一点: 多方面技能需求:设计能力:App开发不仅仅涉及代码编写,还需要设计出优秀的用户界面和用户体验(UI/UX)。用户体验考…

    2025年4月30日
    000
  • 小程序心得分享:打造用户喜爱的应用秘诀

    小程序凭借其便捷的用户体验和轻量级的运行特性,成为企业连接用户、提高服务效率的重要工具。本文将分享打造用户喜爱的小程序的一些心得,揭示让小程序获得用户青睐的秘诀,并探讨如何通过专业的app开发服务解决小程序开发过程中遇到的问题。 首先,用户…

    2025年4月28日
    000
  • 如何判断我的小程序是否有市场需求?

    小程序因其便捷、快速、无需下载安装的特性,迅速获得了用户的广泛认可。然而,开发者在面对如何判断小程序是否具备市场需求时,需进行深入的思考。以下是一些实用的建议和方法。 首先,我们需要明确一点:市场需求不是凭空产生的,而是基于用户的真实需求和…

    2025年4月28日
    000

发表回复

登录后才能评论