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

微信小程序弹窗自定义实例详解

在微信小程序开发中，有时需要根据客户需求定制系统组件，弹窗就是其中之一。本文将介绍微信小程序弹窗的自定义实例代码，希望能给需要的朋友一些参考。

一、WXML代码

我们在WXML中创建一个弹窗视图，使用hidden属性进行显示与隐藏的切换：

```html

点击此处

```

其中，`myToast`是弹窗的类名，`nullHouse`是控制弹窗显示与隐藏的数据。

二、WXSS代码设置弹窗样式

然后，我们在WXSS中设置弹窗的样式，包括宽度、高度、边距、背景颜色等：

```css

.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代码

在JS中定义相关事件处理函数。当点击“点击此处”时，弹窗会显示并1秒后自动隐藏：

```javascript

Page({

data: {

nullHouse: true, // 先设置隐藏

},

clickArea: function() {

var that = this;

this.setData({

nullHouse: false, // 弹窗显示

});

setTimeout(function() {

that.data.nullHouse = true; // 1秒之后弹窗隐藏

}, 1000);

},

});

```

注：setTimeout()函数是异步的，当计算机执行到setTimeout时，此任务会暂停并保存，继续执行后续未完成的任务。当条件满足时，再将setTimeout的执行任务放回任务队列的后面，等待执行。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！如有任何疑问，欢迎交流。