介紹一個簡單的案例,廣告的彈出與關閉,頁面如下:
image
點擊×按鈕,該頁面刪除
思路如下:
- 設置大view高寬為屏幕大小,fixed定位,透明居最外層,用isSuccess控制此view顯示還是消失
- 設置里面的圖片居中
- 簡歷一個小的view,給一個時間bindtap為close,當點擊時,isSuccess從false轉為true
<!--pages/home/home.wxml-->
<view class="girl" wx:if='{{isSuccess}}'>
<view bindtap="close">×</view>
<image src="https://s2.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png">
</image>
</view>
/* pages/home/home.wxss */
.girl{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.girl image{
width: 400rpx;
height: 300rpx;
}
.girl view{
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
align-items: center;
border-radius: 50%;
background: #fff;
position: absolute;
right: 200rpx;
top: 200rpx;
}
// pages/home/home.js
Page({
del(e) {
close(){
this.setData({
isSuccess:false
})
},
/**
* 頁面的初始數據
*/
data: {
isSuccess:true
}
})