android 广告close,小程序广告弹出与关闭

一、无时间间隔广告弹出

实现效果

1.思考：

进入页面广告就存在,关闭之后不显示，需要用wx:if来控制页面是否渲染(是否显示),

wx:if="true"显示,false不显示

定义show来控制wx:if的显示

开始为true，点击关闭按钮之后触发事件函数closelaye，变为false

2.实现

第一步

搭建页面，为wx:if绑定show,关闭按钮绑定触发事件函数closelaye

/* 整体最外层*/

.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

})

android 广告close,小程序广告弹出与关闭相关推荐

html5底部悬浮添加到桌面,桌面小程序在弹出的界面点击“添加到桌面”
有个小程序怎么操作到桌面上? 欢迎来到CSS布局HTML,你是不是想把微信小程序弄到手机桌面上? 在小程序右上角有三个点点开,里面有个添加到桌面.下图以跳一跳游戏小程序为例,手机要打开快捷方式的权限. ...
微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...
微信小程序—自定义弹出式键盘（车牌键盘、十六进制键盘），可快速定义不同场景键盘
摘要小程序input组件提供的键盘有四种(text-文本.number-数字.idcard-身份证.digit-小数点),但输入场景万千,很多情况下都需要排除不必要的干扰,比如车牌输入.色值输入,或 ...
微信最新授权登录微信小程序无法弹出授权弹框 open-type getUserInfo获取不到用户信息授权不弹框
解决办法使用getUserProfile接口 !!!! 大大的坑啊,调试了半天 getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
小程序实现弹出输入框
1.微信自带组件样式: wxml <view class="close" bindtap="close">拒绝</view> js P ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...

android 广告close,小程序广告弹出与关闭

android 广告close,小程序广告弹出与关闭相关推荐

最新文章

热门文章