微信弹出广告图.png
直接上代码
wxml
<view class="poster" wx:if='{{isSuccess}}'>
<view class="advert">
<view bindtap="close">×</view>
<image
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604055118571&di=b7fb3c322e2a77440b3791cad3a7b003&imgtype=0&src=http%3A%2F%2Fhomesitetask.zbjimg.com%2Fhomesite%2Ftask%2F21511972_095056617000_2.jpg%2Forigine%2F1164cc8d-daa1-405a-bd79-5b9aa3538ec5" mode="widthFix">
</image>
</view>
</view>
wxss
//设置大view高宽为屏幕大小，fixed定位，透明居最外层
/* pages/home/home.wxss */
.poster {
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;
}
.advert {
width: 550rpx;
height: 750rpx;
position: relative;
}
.advert image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.advert view {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 50%;
border: 1rpx solid #fff;
color: #fff;
position: absolute;
left: 50%;
bottom: -13%;
transform: translate(-50%, 0);
}
js
//isSuccess控制显示隐藏
Page({
data: {
isSuccess: true
},
close() {
//点击x号关闭
this.setData({
isSuccess: false
})
},
})
