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

 所属分类:php教程

 浏览:344次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更...
更多教程资料进入php教程获得。 这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下

微信小程序 弹窗

首先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提示文字及按钮选中/取消状态的方法

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

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!