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

这是一个关于微信小程序首页广告的demo,通过.wxml和.wxss文件实现广告展示并阻止点击穿透。在.wxml中,利用catchtouchmove事件固定广告。.wxss中可以使用CSS3动画特性,包括rotate旋转、skew翻转、scale缩放和translate移动。需要注意,广告的背景图片应为base64编码或本地资源,且image标签只能接受网络或fileId来源。

这个微信小程序首页广告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-ind
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值