微信小程序---进入时广告实现

客官°小女子只卖身不卖艺 2022-04-13 09:01 270阅读 0赞

废话不多说，先上图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]

PS：附上最近写的一个小程序商城demo地址：[***小黑杂货铺：https://github.com/Yxiaogg/vioShop***][https_github.com_Yxiaogg_vioShop]:（***支持请点star哟***）  
欢迎讨论！

实现思路：  
1.写一个定时器，绑定一个数据，这里使用的是miao，初始值为6。  
2.在进入页面时开始执行定时器，每秒执行一次miao-1操作。

this.time = setInterval(function () {
      			that.setData({
      	   miao: that.data.miao-1
      })

3.当miao==0时，清除定时器clearInterval(this.time)（一定要清除定时器），然后自动跳转到首页。

if (that.data.miao == 0){
        clearInterval(this.time);
        wx.switchTab({    //保留当前页面，跳转到应用内的某个页面
          url: "/pages/index/index"
        })
      }

4.也可以点击跳过广告，当用户点击跳过广告时，清除定时器（一定要清除定时器），然后页面跳转

cliadv: function(){
            clearInterval(this.time)
            wx.switchTab({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
              url: "/pages/index/index"
            })
      }

WXML部分

<view class='main'>
    <view class='adv1'>
      <image src='/img/adv.jpg' class='adv-img'></image>
      <text class='tiaoguo' bindtap='cliadv'>跳过广告 {
       {miao}}</text>
    </view>
    <view>
      <button>小黑杂货铺</button>
      <text class='text2'>小黑出品，必属精品</text>
    </view>
    </view>

WXSS部分

/* pages/advertising/advertising.wxss */
    .adv1{
      width: 100%;
      height: 900rpx;
      background: url('/img/ba3.png') no-repaeat 0 0;
      background-size: contain;
    }
    .adv-img{
      width: 100%;
      height: 900rpx;
      position: absolute;
    }
    .tiaoguo{
      font-size: 25rpx;
      background-color: wheat;
      border-radius: 80rpx;
      display: inline-block;
      margin-left: 10rpx;
      position: absolute;
      z-index: 999;
      right: 25rpx;
      top: 850rpx;
      padding-left: 10rpx;
      padding-right: 10rpx;
    }
    button{
        border-radius: 18rpx;
        width: 220rpx;
        background-color: #EECBAD;
        color: #8B5742;
        margin-top: 38rpx;
        font-size: 33rpx;
    }
    .text2{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        margin-top: 23rpx;
        font-size: 28rpx;
    }

JS代码部分

// pages/advertising/advertising.js
        Page({
      /**
       * 页面的初始数据
       */
      data: {
        miao: 6,
        time:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        this.time = setInterval(function () {
          that.setData({
            miao: that.data.miao-1
          })
          if (that.data.miao == 0){
            clearInterval(this.time);
            wx.switchTab({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
              url: "/pages/index/index"
            })
          }
    
      }, 1000)
      },
    
      cliadv: function(){
            clearInterval(this.time)
            wx.switchTab({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
              url: "/pages/index/index"
            })
      }
    })

学习交流群，有问题可以加一下，**不收费 不收费 不收费**![欢迎加入交流][20190429162944575.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTgxNTAwMQ_size_16_color_FFFFFF_t_70]: /images/20220413/f233e92924014e508e049bb508a479df.png
[https_github.com_Yxiaogg_vioShop]: https://github.com/Yxiaogg/vioShop
[20190429162944575.png]: /images/20220413/cfab5a66fb5745c38b85a7a67cd76c96.png