美文网首页
小程序首屏广告倒计时关闭

小程序首屏广告倒计时关闭

作者: shine001 | 来源:发表于2022-07-25 10:00 被阅读0次

js文件


const app = getApp()
Page({
      data: {
            advertising: true,
            time: 5,//倒计时 秒
            
      },
      jmp() {
            this.setData({
                  advertising: false
            });
            wx.navigateTo({
                url: '/pages/enter/index',
                success: (result) => {
                 },
                fail: () => {},
                complete: () => {}
            });
            clearInterval(this.x);//清除定时器
      },//跳过广告
      onLoad: function () {
            var that = this
            this.x = setInterval(function () {
                  that.setData({
                      time: that.data.time - 1
                  })
                  if (that.data.time == 0)
                  that.jmp()
            }, 1000)//每秒执行一次  
      },

})

wxml

<view wx:if="{{advertising}}">
     <view class="go" >
        <button  bindtap="jmp">跳过{{time}}s</button> 
     </view>
     <!--首屏广告图 改网络图片非本地图片-->
     <image  src="/images/icon/adpic.jpg" class="bg"></image>
</view>

<view wx:else>
<!--页面内容-->
</view>

wxss

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.go {
      position: absolute;
      right: 30rpx;
      top: 80rpx;  
      z-index: 9;
}
.go button {
      font-size: 28rpx;
      letter-spacing: 4rpx;
      border-radius: 30rpx;
      color: #000;
      background: rgba(255, 255, 255, 0.5);
       display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 160rpx;
      height: 60rpx;
}

相关文章

网友评论

      本文标题:小程序首屏广告倒计时关闭

      本文链接:https://www.haomeiwen.com/subject/bwrgirtx.html