本文實例為大家分享了微信小程序實現首頁彈出廣告的具體代碼，供大家參考，具體內容如下
這個微信小程序首頁廣告demo
僅供有需要的參考
.wxml
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- 廣告展示 --> <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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
.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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
// miniprogram/pages/demo/demo.jsPage({ /** * 頁面的初始數據 */ 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 () { }}) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/hjiaqing/article/details/104107024
