微信小程序 首页弹出广告的demo

这个微信小程序首页广告demo

仅供有需要的参考

.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(-5