首页 > 编程语言 >自定义微信小程序主入口3秒钟广告页面

自定义微信小程序主入口3秒钟广告页面

时间:2023-02-17 16:25:02浏览次数:41  
标签:index 自定义 微信 miao 跳转 广告页面 time pages 页面

实现思路:

  1. 写一个定时器,绑定一个数据,这里使用的是 miao,初始值为 3。
  2. 在进入页面时开始执行定时器,每秒执行一次 miao-1 操作。
this.time = setInterval(function () {
  that.setData({
    miao: that.data.miao - 1,
  });
});
  1. 当 miao==0 时,清除定时器 clearInterval(this.time)(一定要清除定时器),然后自动跳转到首页。
if (that.data.miao == 0) {
  clearInterval(this.time);
  wx.switchTab({
    //保留当前页面,跳转到应用内的某个页面
    url: "/pages/index/index",
  });
}
  1. 也可以点击跳过广告,当用户点击跳过广告时,清除定时器(一定要清除定时器),然后页面跳转
cliadv: function(){
    clearInterval(this.time)
    wx.switchTab({    //保留当前页面,跳转到应用内的某个页面(最多打开5个页面,之后按钮就没有响应的)
        url: "/pages/index/index"
    })
}

WXML 部分

<!--pages/advertising/advertising.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>
/* 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;
}
// pages/advertising/advertising.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    miao: 3,
    time: "",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: 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",
    });
  },
});

标签:index,自定义,微信,miao,跳转,广告页面,time,pages,页面
From: https://www.cnblogs.com/wp-leonard/p/17130546.html

相关文章