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

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)
  }

上一篇:Postman接口测试 ------- 运行接口用例集collection


下一篇:【视频直播】HLS实时在线人数统计实践