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

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

仅供有需要的参考

.wxml

this is ad

//事件 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 () {

}

})

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