微信小程序 弹窗自定义实例代码
程序员文章站
2023-12-01 13:07:52
微信小程序 弹窗
首先wxml代码:
暂无有关信息<...
微信小程序 弹窗
首先wxml代码:
<view class="mytoast" hidden="{{nullhouse}}">暂无有关信息</view> <view bindtap="clickarea">点击此处</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的执行任务放回任务队列的后面,等待执行。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!