微信小程序首页的广告弹窗，只加载一次

功能：微信小程序，首次进入页面时显示广告弹窗，点击空白处/点击关闭按钮，隐藏此弹窗（7秒后自动隐藏弹窗）。

<!-- 页面的广告图片 -->
<view class="modal_new" hidden='{{modal_status}}'><image class=" close_btn" src="xxxxx.png"    bindtap="close_btn"></image><image src="xxxx.png" class="new_shop_img" mode="widthFix"></image>
</view>
<!-- 灰色背景颜色 -->
<view class="modal_" bindtap="modal_btn" hidden='{{modal_status2}}'></view>

.modal_new{width: 50%;height: 200px;position: fixed;top: 25%;left: 22%;z-index: 21;}
.modal_new .close_btn{position: absolute;top: -25px;right: -51px;width: 47px;height: 50px;z-index: 1;
}
.new_shop_img{position: absolute;width: 222px;
}
.modal_{width: 100%;height: 100%;background: rgb(0,0,0);position: fixed;top: 0;z-index: 20;opacity: .6;
}

// app.jsglobalData: {modal_shop:1,  // 显示首页的广告弹窗}

// index.js
onLoad:function(options){var that = this// 判断首页的广告层是否显示 （modal_shop == 1 显示 , 7秒后隐藏广告弹窗；如果等于 2 隐藏广告弹窗）if(app.globalData.modal_shop== 1){that.shop_timer() // 调用定时器方法}else{that.setData({modal_status:true, //  广告弹窗隐藏modal_status2:true,// 广告弹窗隐藏});}
},/*** 广告弹窗 7秒关闭(7s定时器)*/
shop_timer: function () {var that = this;setTimeout(function () {that.setData({modal_status:true, //  新店开业图片隐藏modal_status2:true,// 遮罩层隐藏});}, 7000);
},

// 如果，跳转其他页面，再次返回首页，还是会出现广告弹窗；所以需要设置 app.globalData.modal_shop 的值，修改成 2
var app = getApp()onLoad:function(){app.globalData.modal_shop = 2 // 首页广告层，显示与隐藏 1 显示 2 隐藏
}

微信小程序首页的广告弹窗，只加载一次相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
微信小程序图片处理方案，解决加载缓慢，影响用户体验
1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也 ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
【微信技术-微信小程序】------- 渐进式骨架屏（加载流）（第二篇）
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录一.什么是渐进式骨架屏? 二.实现渐进式骨架屏三.效果展示下载示例代码地址: 渐进式骨架屏示例代码-下载一 ...
微信小程序下拉刷新/上拉加载组件
简介一款基于官方组件scroll-view进行封装的支持上拉加载下拉刷新的微信小程序组件,需要基础库2.10.1及以上, 项目地址:github 预览功能下拉刷新上拉加载支持自定义下拉样式 ...
【微信小程序】image真机无法加载网络图片
背景由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...

微信小程序首页的广告弹窗，只加载一次

微信小程序首页的广告弹窗，只加载一次相关推荐

最新文章

热门文章

微信小程序 首页的广告弹窗，只加载一次

微信小程序 首页的广告弹窗，只加载一次相关推荐

最新文章

热门文章

微信小程序首页的广告弹窗，只加载一次

微信小程序首页的广告弹窗，只加载一次相关推荐