美文网首页
小程序广告弹出与关闭

小程序广告弹出与关闭

作者: Echovim | 来源:发表于2019-06-18 12:27 被阅读0次

一、无时间间隔广告弹出


实现效果

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

相关文章

  • 小程序广告弹出与关闭

    一、无时间间隔广告弹出 1.思考: 进入页面广告就存在,关闭之后不显示,需要用wx:if来控制页面是否渲染(是否显...

  • js实现倒计时广告效果

    页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从...

  • 广告弹出效果

    自动关闭的广告 效果: html代码: js代码: 关闭后自动弹出的广告 效果: html代码跟上面是一样的,js...

  • 关闭window弹出的各种广告

    1.先不要关闭广告,打开任务管理器,找到广告的进程 2.鼠标右键->打开文件位置 禁用方法 3 . win + R...

  • WinForm窗口关闭提示框

    winform 中点击"X"弹出提示是否关闭(退出整个应用程序代码):

  • 3km-简书转盘广告

    1、简书转盘广告 今天, 苹果系统的简书转盘广告, 又开始弹出来了, 而且相比安卓手机系统, 它不能提前关闭广告,...

  • 教你如何关闭Win10系统烦人的弹窗广告

    win10系统在我们日常使用中总是会不定时弹出各种广告弹窗,这些弹窗怎么关闭都没用,该弹出来还是弹出来,简直令人烦...

  • 越来越多的广告

    不知道从什么时候起,用手机写日更,点进简书的写作界面,就会弹出广告。 点击广告上方的关闭按钮,有时会关闭,有时却跳...

  • 99%的人都不知道如何通过python技术免费看小说

    导语:相信大家都有在看小说的时候被频繁弹出的广告骚扰而感到烦不胜烦,今天给大家带来一个小爬虫程序,帮助大家摆脱广告...

  • 99%的人都不知道如何通过python技术免费看小说

    导语:相信大家都有在看小说的时候被频繁弹出的广告骚扰而感到烦不胜烦,今天给大家带来一个小爬虫程序,帮助大家摆脱广告...

网友评论

      本文标题:小程序广告弹出与关闭

      本文链接:https://www.haomeiwen.com/subject/pqwxqctx.html