小程序广告弹出与关闭

一、无时间间隔广告弹出

实现效果

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
    })
  },