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

2022/2/28 11:21:36

编程Tag： 图片微信裁剪模式跳转缩放自动 time

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

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中需要给“跳过”绑定点击事件点击跳过实现页面跳转自动跳转我这边是用在了页面加载事件中

点击事件命名自定义

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

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

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

相关编程文章

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