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

2023-07-08 21:27:08 307

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

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

仅供有需要的参考

.wxml








thisisad

//事件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:sport1.5slinear1;
}
@keyframessport{
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-repeat10rpx10rpx/40rpx40rpx;
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});
letmusicId=event.currentTarget.dataset.id;
wx.navigateTo({
url:`../musicList/musicList?playlistId=${musicId}`,

success(){
console.log('navigatesuccess')
},
fail(err){
console.log(err)
}
});

},
//阻止滚动穿透

preventMove(e){
console.log(e);
},
/**
*生命周期函数--监听页面加载
*/
asynconLoad(options){
this._getPlaylist();
},

async_getPlaylist(){
wx.showLoading({
title:'加载中',
})
letlistCount=awaitwx.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();
returnres.result.length;
})
.catch(err=>{console.error;wx.hideLoading();wx.showToast({
title:'加载失败，稍后再试！',
icon:'none',
duration:1500
})});

returnlistCount;
},
//tcbRouter
asynctcbmusicTap(){
letresult=awaitwx.cloud.callFunction({
name:'tcbRouter',
data:{
$url:'music'
}
})
.then(res=>console.log(res))
.catch(err=>console.error);
},
asynctcbmovieTap(){
letresult=awaitwx.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(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
asynconPullDownRefresh(){
this.setData({playlist:[]});
awaitthis._getPlaylist();
wx.stopPullDownRefresh();
},

/**
*页面上拉触底事件的处理函数
*/
asynconReachBottom(){

letflag=awaitthis._getPlaylist();

if(!flag){
wx.showToast({
title:'我是一个有底的人!',
duration:2000,
image:'../../images/girl3.png'
})
}

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐