微信公众号开发

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

本文主要是介绍微信小程序 启动页自动跳转，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

wxml

图片自定义 

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

modestringscaleToFill否图片裁剪、缩放的模式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)
  }

这篇关于微信小程序 启动页自动跳转的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航