MENU

微信小程序启动页完整模板

April 28, 2020 • 开发

效果如下

show.gif

实现代码

1.js

Page({
      /** 页面的初始数据 */
      data: {
            bg_img: 'start_bg.png',//背景图地址,可相对/绝对,可本地/远程
            count: 4,//倒计时秒数
            show_button:false,//初始不显示跳过按钮
      },
      //初始化进入程序
      onLoad() {
            this.countDown();
            this.show_button();
      },
      //延迟一秒显示跳转按钮
      show_button() {
            let that = this
            setTimeout(function() {
                  that.setData({
                        show_button: true
                  })
            }, 1000)
      },
      //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
      switchTab() {
            clearInterval(this.data.time); //清除倒计时
            wx.switchTab({
                  url: '/pages/index/index'
            })
      },
      //倒计时计数
      countDown: function() {
            let that = this;
            let count = that.data.count;
            that.data.time = setInterval(function() {
                  if (count > 0) {
                        count--
                        that.setData({
                              count: count
                        })
                  } else {
                        that.setData({
                              count: count
                        })
                        that.switchTab();
                        clearInterval(that.data.time)
                  }
            }, 1000)
      },
})

2.json

{
      "navigationStyle": "custom"
}

3.wxml

<view wx:if="{{show_button}}" class="count_botton fade_in" bindtap="switchTab">跳过{{count}}s</view>
<image class="bg_img" src="{{bg_img}}"></image>

4.wxss

page {
      width: 100vw;
      height: 100vh;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      box-sizing: border-box;
}

.bg_img {
      z-index: -1;
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
}

.count_botton {
      position: relative;
      margin-bottom: 6vh;
      width: 300rpx;
      height: 100rpx;
      /*渐变色网站https://webgradients.com*/
      background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
      color: #fff;
      font-weight: bold;
      font-size: 32rpx;
      letter-spacing: 4rpx;
      border-radius: 50rpx;
      /*flex布局、横向纵向居中*/
      display: flex;
      justify-content: center;
      align-items: center;
}

/*在ID或类中增加如下的动画代码*/

.fade_in {
      animation-name: fadeIn; /*动画名称*/
      animation-duration: 3s; /*动画持续时间*/
      animation-iteration-count: 1; /*动画次数*/
      animation-delay: 0s; /*延迟时间*/
}

/*定义动画,名称为fadeIn*/

@keyframes fadeIn {
      0% {
            opacity: 0; /*初始状态 透明度为0*/
      }

      50% {
            opacity: 0.6; /*中间状态 透明度为0.6*/
      }

      100% {
            opacity: 1; /*结尾状态 透明度为1*/
      }
}

完整代码下载

https://github.com/xuhuai66/start-page

转载请注明出处,并添加原文地址

Archives QR Code Tip
QR Code for this page
Tipping QR Code