当前位置: 代码迷 >> 综合 >> 微信小程序启动页
  详细解决方案

微信小程序启动页

热度:109   发布时间:2023-09-27 13:12:42.0

1、微信小程序的启动页。

启动页在设计中很常见,一般会跟倒计时搭配使用(一点可以点击跳过或者等待时间自然过渡)

*.wxml文件设置

<view class="Startup">

<view class="Countdown" bindtap="startJump">

<a>{ {count}}s</a>

</view>

<test class="item">{ {text}}</test>

</view>

*.js相应(5S倒计时)

// pages/startup/main.js

function countdown(that) {

  var count = that.data.count;

  if(count == 0) {

    // console.log("Time Out...");

   wx.switchTab({

   url: '../home/home'

   });

   that.setData({

        count: 0

    });

    return;

  }

 

  var time = setTimeout(function() {  

    if(that.data.clear==true){

that.setData({

        count: 5

      }); 

      clearInterval(time);

   }else{

      that.setData({

        count: count - 1

      });

      countdown(that);     

   }

 

  }, 1000);

}

Page({

  /**

   * 页面的初始数据

   */

  data: {

    text: "This is page data",

    count:5,

    clear:false

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function(options) {

let that = this;

countdown(that);

  },

/**

* 生命周期函数--监听页面隐藏

*/

//onHide: function () {

// clearInterval(projectLoad);

//}

 

//从启动页跳转界面

  startJump: function() {

    let that = this;

    that.setData({

      clear: true

    });   

   wx.switchTab({

   url: '../home/home'

   })

  }

})

2、进入首页,如果进入有底部栏的首页(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面)

   wx.switchTab({

         url: '../home/home'

   })

 

  相关解决方案