微信小程序实现首页弹出广告


Posted in Javascript onDecember 03, 2020

本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下

这个微信小程序首页广告demo

仅供有需要的参考

.wxml

<!-- 广告展示 -->
 
<view class="AdView" hidden="{{showAd}}" catchtouchmove="preventMove">
<view class="bg" ></view>
<view class="active active-sport" >
<view class="cancel" bind:tap = "cancelTap" ></view>
<view class="active-content" bind:tap ="activeContent" data-id='2340173092'>
 <text>this is ad</text>
 <image class="active-img" src ='cloud://international-3bp20.696e-international-3bp20-1300609829/my-image.jpeg' mode="aspectFit"></image>
</view>
</view>
</view>

//事件 catchtouchmove方法主要作用是固定广告防止点击穿透,就是使用弹出广告的后面内容不能上下拉动。其中对应的.js方法可以不做任何处理。此处只能在真机上看到实际效果,在电脑上不能。并且此方法要放到广告view最外层 

.wxss

.bg{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0; 
 z-index: 990;
 background-color:rgb(180, 180, 180);
 opacity: 0.5;
}
.active{
 width: 80%;
 height:80%;
 background-color: #fff;
 position: absolute;
 top:10%;
 left:50%;
 transform: translate(-50%);
 
 z-index: 992;
}
.active-sport{
 animation: sport 1.5s linear 1;
}
@keyframes sport{
 from{ transform:rotate(0deg) skew(-10deg) scale(2.0) translate(-100%,0)}
 
 to{ transform:rotate(360deg) skew(0deg) scale(1.0) translate(-50%,0)}
}
.active-content{
 width: 80%;
 height:80%;
 background-color: blue ;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 text-align: center;
 
}
.active-img{
 width: 100%;
 
}
.cancel{
 background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTc5OTMwNDc5NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxMTkiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTg1MC41MzgzNDMgODk1LjUxNjc0NGMtMTEuNDk0Nzk5IDAtMjIuOTg4NTc0LTQuMzg2OTE0LTMxLjc2MzQyNC0xMy4xNjE3NjRMMTQxLjEwMzY5MiAyMDQuNjY5NDI2Yy0xNy41NDg2NzgtMTcuNTM0MzUyLTE3LjU0ODY3OC00NS45OTI0OTcgMC02My41MjU4MjUgMTcuNTQ4Njc4LTE3LjU0ODY3OCA0NS45NzcxNDctMTcuNTQ4Njc4IDYzLjUyNTgyNSAwbDY3Ny42NzEyMjcgNjc3LjY4NTU1M2MxNy41NDg2NzggMTcuNTM0MzUyIDE3LjU0ODY3OCA0NS45OTI0OTcgMCA2My41MjU4MjVDODczLjUyNjkxNyA4OTEuMTI4ODA3IDg2Mi4wMzIxMTggODk1LjUxNjc0NCA4NTAuNTM4MzQzIDg5NS41MTY3NDR6IiBwLWlkPSIyMTIwIiBmaWxsPSIjY2RjZGNkIj48L3BhdGg+PHBhdGggZD0iTTE3Mi44NjcxMTYgODk1LjUxNjc0NGMtMTEuNDk0Nzk5IDAtMjIuOTg4NTc0LTQuMzg2OTE0LTMxLjc2MzQyNC0xMy4xNjE3NjQtMTcuNTQ4Njc4LTE3LjUzNDM1Mi0xNy41NDg2NzgtNDUuOTkyNDk3IDAtNjMuNTI1ODI1bDY3Ny42NzEyMjctNjc3LjY4NTU1M2MxNy41NDg2NzgtMTcuNTQ4Njc4IDQ1Ljk3NzE0Ny0xNy41NDg2NzggNjMuNTI1ODI1IDAgMTcuNTQ4Njc4IDE3LjUzNDM1MiAxNy41NDg2NzggNDUuOTkyNDk3IDAgNjMuNTI1ODI1TDIwNC42Mjk1MTcgODgyLjM1NDk3OUMxOTUuODU1NjkgODkxLjEyODgwNyAxODQuMzYwODkxIDg5NS41MTY3NDQgMTcyLjg2NzExNiA4OTUuNTE2NzQ0eiIgcC1pZD0iMjEyMSIgZmlsbD0iI2NkY2RjZCI+PC9wYXRoPjwvc3ZnPg==') no-repeat 10rpx 10rpx/40rpx 40rpx;
width: 60rpx;
height: 60rpx;
position: absolute;
top:5rpx;
right: 5rpx;
z-index: 998;
 
}

此处cancel的背景图片只能使用base64或本地。

image 只能是网络或者fieldId上

可以作用CSS3特性,制作动画,制作动画时要注意加上transform之后,才可以增加rotate旋转,skew翻转,scale缩放,translate移动。

.js 

// miniprogram/pages/demo/demo.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 playlist:[],
 showAd:false
 },
 //cancelTap隐藏方向
 cancelTap(){
 this.setData({showAd:!this.data.showAd});
 },
 //广告链接
 activeContent(event){
 console.log(event.currentTarget.dataset.id);
 // this.setData({showAd:!this.data.showAd});
 let musicId=event.currentTarget.dataset.id;
 wx.navigateTo({
 url:`../musicList/musicList?playlistId=${musicId}`, 
 
 success(){
 console.log('navigate success')
 },
 fail(err){
 console.log(err)
 }
 });
 
 },
 //阻止滚动穿透
 
 preventMove(e){
 console.log(e);
 },
 /**
 * 生命周期函数--监听页面加载
 */
 async onLoad(options) {
 this._getPlaylist();
 },
 
 async _getPlaylist(){
 wx.showLoading({
  title: '加载中',
 })
 let listCount = await wx.cloud.callFunction({
 name: 'music',
 data: {
 $url: 'getPlaylist',
 start: this.data.playlist.length,
 count: 15
 }
 })
 .then(res => { 
 console.log(res); 
 res.result.map(value=>{
  this.setData({
  playlist:this.data.playlist.concat(value)
  })
  
 })
 wx.hideLoading();
 return res.result.length;
 })
 .catch(err=>{console.error;wx.hideLoading();wx.showToast({
 title: '加载失败,稍后再试!',
 icon:'none',
 duration:1500
 })});
 
 return listCount;
 },
//tcbRouter 
 async tcbmusicTap(){
 let result = await wx.cloud.callFunction({
 name:'tcbRouter',
 data:{
  $url:'music'
 }
 })
 .then(res=>console.log(res))
 .catch(err=>console.error);
 },
 async tcbmovieTap(){
 let result = await wx.cloud.callFunction({
  name:'tcbRouter',
  data:{
  $url:'movie'
  }
 })
 .then(res=>console.log(res))
 .catch(err=>console.error);
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 // this.setData({showAd:false});
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 async onPullDownRefresh() {
 this.setData({ playlist:[]});
 await this._getPlaylist();
 wx.stopPullDownRefresh();
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 async onReachBottom() {
 
 let flag = await this._getPlaylist();
 
 if(!flag){
  wx.showToast({
  title: '我是一个有底的人!',
  duration:2000,
  image:'../../images/girl3.png'
  })
 }
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js分页工具实例
Jan 28 Javascript
关于延迟加载JavaScript
May 05 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 #Javascript
基于javascript实现放大镜特效
Dec 03 #Javascript
javascript实现时钟动画
Dec 03 #Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 #Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 #Javascript
对vue生命周期的深入理解
Dec 03 #Vue.js
在实例中重学JavaScript事件循环
Dec 03 #Javascript
You might like
php实现分页显示
2015/11/03 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
自我鉴定书范文
2013/10/02 职场文书
国培教师自我鉴定
2014/02/12 职场文书
少年闰土教学反思
2014/02/22 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
MySQL创建管理子分区
2022/04/13 MySQL