进入微信小程序弹出广告图片功能

微信弹出广告图.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
    })
  },
})