android 广告close,小程序广告弹出与关闭

一、无时间间隔广告弹出

实现效果

1.思考：

进入页面广告就存在,关闭之后不显示，需要用wx:if来控制页面是否渲染(是否显示),

wx:if="true"显示,false不显示

定义show来控制wx:if的显示

开始为true，点击关闭按钮之后触发事件函数closelaye，变为false

2.实现

第一步

搭建页面，为wx:if绑定show,关闭按钮绑定触发事件函数closelaye

X

/* 整体最外层*/

.layer{

width: 100vw;

height: 100vh;

background: rgba(0,0,0,0.5);

position: fixed;

top: 0px;

display: flex;

justify-content: center;

align-items: center;

}

/* 图片样式*/

.layer image{

width: 500rpx;

height: 500rpx;

}

/*关闭按钮样式 */

.layer .close{

color:#fff;

width: 50rpx;

height: 50rpx;

text-align: center;

background:#000;

border-radius: 50%;

position: absolute;

top: 10px;

right: 10px;

font-size: 14px;

line-height: 50rpx;

}

第二步

定义变量show，初始值为true

data: {

show: false

},

第三步

点击关闭触发事件函数closelayer，更改show的值，为false

closelaye() {

this.setData({

show: false

})

},

二、进入页面3秒后弹出

效果图

1.思考

广告开始为false，3s后为true，变量show来控制是否显示

3s，需要使用定时器setInterval控制，1s执行一次，3s之后清除定时器

定义变量time，初始值time=3,setInterval运行一次time减1，time为0，setInterval清除，广告显示

PS:页面样式同上

2.实现

第一步

定义变量show,time

data: {

show: false,//控制页面显示,默认不显示

time:3//控制时间

},

第二步

onshow中放置定时器，1s运行一次，运行一次减1，并更新time

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

var that = this

var interval = setInterval(function() {

var timenew=that.data.time-1

that.setData({

time:timenew

})

if(that.data.time==0){//当time为0

clearInterval(interval)

that.setData({

show:true//页面显示

})

}

},1000)

}//当此函数下面还有函数时需要加,不然会报错

第三步

点击关闭触发事件函数 closelaye，更改show为false

closelaye() {

this.setData({

show: false

})

},