一、無時(shí)間間隔廣告彈出
實(shí)現(xiàn)效果
1.思考：
- 進(jìn)入頁面廣告就存在,關(guān)閉之后不顯示，需要用wx:if來控制頁面是否渲染（是否顯示）,
wx:if="true"顯示,false不顯示- 定義show來控制wx:if的顯示
- 開始為true贡蓖，點(diǎn)擊關(guān)閉按鈕之后觸發(fā)事件函數(shù)closelaye冀惭，變?yōu)閒alse
2.實(shí)現(xiàn)
第一步
- 搭建頁面，為wx:if綁定
show,關(guān)閉按鈕綁定觸發(fā)事件函數(shù)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><!-- 關(guān)閉按鈕-->
</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;
}
/*關(guān)閉按鈕樣式 */
.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
},
第三步
- 點(diǎn)擊關(guān)閉觸發(fā)事件函數(shù)closelayer忘苛，更改
show的值蝉娜，為false
closelaye() {
this.setData({
show: false
})
},
二唱较、進(jìn)入頁面3秒后彈出
效果圖
1.思考
- 廣告開始為
false，3s后為true召川，變量show來控制是否顯示- 3s绊汹，需要使用定時(shí)器
setInterval控制，1s執(zhí)行一次扮宠，3s之后清除定時(shí)器- 定義變量
time，初始值time=3,setInterval運(yùn)行一次time減1狐榔，time為0坛增，setInterval清除，廣告顯示
PS:頁面樣式同上
2.實(shí)現(xiàn)
第一步
- 定義變量
show,time
data: {
show: false,//控制頁面顯示,默認(rèn)不顯示
time:3//控制時(shí)間
},
第二步
- onshow中放置定時(shí)器薄腻，1s運(yùn)行一次收捣，運(yùn)行一次減1，并更新
time
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function() {
var that = this
var interval = setInterval(function() {
var timenew=that.data.time-1
that.setData({
time:timenew
})
if(that.data.time==0){//當(dāng)time為0
clearInterval(interval)
that.setData({
show:true//頁面顯示
})
}
},1000)
}//當(dāng)此函數(shù)下面還有函數(shù)時(shí)需要加,不然會(huì)報(bào)錯(cuò)
第三步
- 點(diǎn)擊關(guān)閉觸發(fā)事件函數(shù) closelaye庵楷，更改show為false
closelaye() {
this.setData({
show: false
})
},
