小程序笔记（10）豆瓣引导页的实现-倒计时

小程序笔记（10）豆瓣引导页的实现-倒计时

效果图

分析

引导页面的分析

• 一个轮播图swiper用来显示广告数据

  • 这里需要用到一个定时器

        data: {
            // 要显示的公告时间
            time: 5
        }
        onLoad: function (options) {
            // 这里会返回这个事件,用于后面讲这个事件清除
            var timer = setInterval(function () {
                // 如果当前定时大于0,就0--
                if (that.data.time > 0) {
                    that.setData({
                        time: that.data.time - 1
                    })
                    // 如果当前定时等于0,也就是广告结束
                    // 将定时清除,并跳转到广告后的界面
                    if (that.data.time == 0) {
                        clearInterval(timer);
                        wx.switchTab({
                            url: '/pages/index/index',
                        })
                    }
                }
                // 每一秒执行一次
            }, 1000)
        }
          
    

• 一个```navigator``用来跳过广告,进入一个新的页面

  <navigator open-type="switchTab" url="/pages/index/index" class="skip">跳过{{time}}</navigator>
  

• 我们从效果图可以看到跳过按钮和广告页面是重叠的,那么这里用到了绝对布局position: absolute;

  .skip {
    position: absolute;
    right: 0rpx;
    flex-direction: column;
    width: 100rpx;
    color: #fff;
    z-index: 100;
  }
  

• 轮播图数据我们从云开发的存储中获取,需要注意的是存储在云开发中的数据,需要设置为所有用户可读

  

• 在加载页面的时候调用云开发函数访问数据即可

  data: {
      subjects: []
  }
  onLoad: function (options) {
      var that = this;
      const db = wx.cloud.database();
      //  coming_soon - 表名称
      db.collection('coming_soon').get({
        success(res) {
          console.log(res);
          that.setData({
            subjects: res.data[0].subjects
          })
        }
      })
    }
  

• 将数据遍历到轮播图里面

  <swiper indicator-dots="true">
  	<swiper-item wx:for="{{subjects}}" style=" width:100%;height:100%">
  		<view class="image" style="width:100%;height:100%">
  			<image src="{{item.images.large}}" style="width:100%;height:100%"></image>
  		</view>
  	</swiper-item>
  </swiper>
  

• 设置轮播图广告的样式

  swiper {
    position: absolute;
    top: 0rpx;
    height: 100%;
    width: 100%;
  }
  

完整代码

• splash.wxml

  <!-- 倒计时，跳转 -->
  <navigator open-type="switchTab" url="/pages/index/index" class="skip">跳过{{time}}</navigator>
  
  <swiper indicator-dots="true">
  	<swiper-item wx:for="{{subjects}}" style=" width:100%;height:100%">
  		<view class="image" style="width:100%;height:100%">
  			<image src="{{item.images.large}}" style="width:100%;height:100%"></image>
  		</view>
  	</swiper-item>
  </swiper>
  

• splash.wxss

  page {
    width: 100%;
    height: 100%;
  }
  
  .skip {
    position: absolute;
    right: 0rpx;
    flex-direction: column;
    width: 100rpx;
    color: #fff;
    z-index: 100;
  }
  
  swiper {
    position: absolute;
    top: 0rpx;
    height: 100%;
    width: 100%;
  }
  

• splash.js

  // pages/splash/splash.js
  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      time: 5,
      subjects: []
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var that = this;
      const db = wx.cloud.database();
      db.collection('coming_soon').get({
        success(res) {
          console.log(res);
          that.setData({
            subjects: res.data[0].subjects
          })
        }
      })
      
      var timer = setInterval(function () {
        if (that.data.time > 0) {
          that.setData({
            time: that.data.time - 1
          })
          if (that.data.time == 0) {
            clearInterval(timer);
            wx.switchTab({
              url: '/pages/index/index',
            })
          }
        }
      }, 1000)
    }
  })