微信小程序 启动页自动跳转

wxml

图片自定义 

需要注意的是启动页图片  盒子没有定义宽高的情况下宽高都设置为100%会出现图片不显示的问题  这边就需要用到image自带的mode方法 

mode string scaleToFill 否 图片裁剪、缩放的模式 1.0.0 合法值 说明 最低版本 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3 top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

 

<text style="position: absolute;top: 10px;right: 10px;color: #fff;width: 60px;height: 25px;background-color:rgba(255,255,255,0.1);text-align: center;border-radius: 15px;" bindtap="home">跳过{{time}}</text>
<image mode="widthFix" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.XbWs5KyqKjDjcO_RXx4aKAAAAA?w=187&h=332&c=7&r=0&o=5&dpr=1.05&pid=1.7" style="width: 100%;"></image>

 js

js中需要给“跳过”绑定点击事件 点击跳过实现页面跳转 自动跳转我这边是用在了页面加载事件中

点击事件  命名自定义

home:function(){
    wx.switchTab({
      url: '/pages/home/home'
    })
  }

加载事件  这边time需要在data中定义跳转时间

需要注意小程序的赋值需要在setData函数中进行

onLoad() {
//跳转时间
    var time = this.data.time,that = this
//定时器对time重新赋值 1000=1s
    setInterval(function(){
        time--
//time=0的 自动跳转页面
        if(time==0){
          wx.switchTab({
            url: '/pages/home/home'
          })
        }
        that.setData({
          time:time
        })
    },1000)
  }