Wechat applet startup page automatically jumps

wxml

Picture customization  

It should be noted that the startup page image   If the width and height of the box are not defined, the width and height are set to 100% The picture will not be displayed   You need to use image Self contained mode Method  

mode string scaleToFill no Image clipping 、 Zoom mode 1.0.0 Legal value explain Minimum version scaleToFill Zoom mode , Do not keep aspect ratio zooming picture , Stretch the width and height of the picture completely to fill image Elements aspectFit Zoom mode , Keep the aspect ratio scaled , Make the long edges of the picture fully visible . in other words , The picture can be displayed completely . aspectFill Zoom mode , Keep the aspect ratio scaled , Only make sure that the short side of the picture is fully displayed . in other words , Pictures are usually complete only horizontally or vertically , Intercept will occur in the other direction . widthFix Zoom mode , The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged heightFix Zoom mode , The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged 2.10.3 top Cut pattern , Unscaled picture , Show only the top area of the image bottom Cut pattern , Unscaled picture , Only the bottom area of the image is displayed center Cut pattern , Unscaled picture , Show only the middle part of the picture left Cut pattern , Unscaled picture , Only the left side of the image is displayed right Cut pattern , Unscaled picture , Show only the right area of the picture top left Cut pattern , Unscaled picture , Only the upper left of the image is displayed top right Cut pattern , Unscaled picture , Only the upper right of the image is displayed bottom left Cut pattern , Unscaled picture , Only the lower left of the image is displayed bottom right Cut pattern , Unscaled picture , Only the lower right part of the image is displayed

 

<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"> skip {
   {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 We need to give them in class “ skip ” Bind click event Click skip to jump to the page Auto jump is used in page loading events

Click event   Name custom

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

Loading event   here time Need to be in data Jump time is defined in

It should be noted that the assignment of the applet needs to be in setData In function

onLoad() {
// Jump time 
    var time = this.data.time,that = this
// Timer pair time Reassign  1000=1s
    setInterval(function(){
        time--
//time=0 Of   Auto jump page 
        if(time==0){
          wx.switchTab({
            url: '/pages/home/home'
          })
        }
        that.setData({
          time:time
        })
    },1000)
  }