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


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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
jQuery实现本地存储
Dec 22 jQuery
为什么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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
载入进度条 效果
2006/07/08 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
围观tangram js库
2010/12/28 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
vue中$nextTick的用法讲解
2019/01/17 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python sep参数使用方法详解
2020/02/12 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
店长助理岗位职责
2013/12/13 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
运动会通讯稿100字
2014/01/31 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
《识字五》教学反思
2014/03/01 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
部门优秀员工推荐信
2015/03/24 职场文书