溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序中怎么添加一個彈出廣告？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
.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 () {
}
})看完上述內容，你們掌握微信小程序中怎么添加一個彈出廣告的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
