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

百变鹏仔 5天前 #前端问答

文章标签自定义

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

微信小程序弹窗

首先wxml代码：

<view>暂无有关信息</view><view>点击此处</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的执行任务放回任务队列的后面，等待执行。

文章推荐

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

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

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

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）