微信小程序强窗广告实现在起来,理论上还是比较简单的
理论:
1、进入页面等三秒时间弹了页面。
2、点击图片跳转到相对应的页面位置。
3、点击关闭按钮关闭弹窗广告。
如何实现:
首先搭建页面,为wx:if绑定show,图片和关闭按钮绑定触发事件。
<view>这是首页</view>
<!--搭建页面,为wx:if绑定show,关闭按钮绑定触发事件函数closelaye-->
<view class='layer' wx:if="{{show}}">
<image class='layer-img' src='https://ad-1259215346.cos.ap-chengdu.myqcloud.com/013c5b5a6fd08fa80120a12372ca81.png%401280w_1l_2o_100sh.png' mode='widthFix' bindtap='tz01'>
</image><!--广告图片-->
<view class='colse' bindtap='closelaye'><!--关闭按钮-->
<image class='colse-icon' src='../img/icon/close.png' mode='widthFix'></image>
</view>
</view>
设置弹窗广告图片样式
.layer{
width:100vw;
height: 100vh;
position: fixed;
top:0px;
display: flex;
justify-content: center;
align-items: center;
}
.layer-img{
width: 100%; /*弹窗广告图片的大小*/
}
.colse-icon{
display: flex;
width: 30px;
position: absolute; /*设置为绝对定位,调整关闭按钮的位置*/
top:80px;
right: 30px;
}
广告开始为false,3秒之后为true.
data: {
show: false, //初始化定义show为false
time: 3, //定义时间为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) {
clearInterval(interval)
that.setData({
show: true //如果time的值为0时,将data里面show的值改为true,图片就可以显示了
})
}
}, 1000)
},
点击触发事件函数,更改show的值为false。
closelaye() {
this.setData({
show: false //bindtap点击事件,点击colse-icon时修改show的值为false,关闭图片。
})
},
基本为的思路就是这样的。