重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

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

时间:2020-09-09 08:30:04 作者:重庆seo小潘 来源:
这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下 微信小程序 弹窗 首先wxml代码: view>注:hidden属性用于切换比较频繁的地方。

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

微信小程序 弹窗

首先wxml代码:

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

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