一、无时间间隔广告弹出
实现效果
1.思考：
- 进入页面广告就存在,关闭之后不显示，需要用wx:if来控制页面是否渲染（是否显示）,
wx:if="true"显示,false不显示- 定义show来控制wx:if的显示
- 开始为true，点击关闭按钮之后触发事件函数closelaye，变为false
2.实现
第一步
- 搭建页面，为wx:if绑定
show,关闭按钮绑定触发事件函数closelaye
<view class='layer' wx:if="{{show}}">
<image src='http://p1.music.126.net/sWCnZnByFvS0Xi9JBr6Q7A==/109951164152967276.jpg'></image><!-- 广告图片-->
<view class='close' bindtap='closelaye'>X</view><!-- 关闭按钮-->
</view>
/* 整体最外层*/
.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
})
},
