Sample code on the welcome page for applet development

This article mainly introduces the detailed information about the examples of the welcome page development for applets. here we will implement simple examples of the welcome page and the implementation code and implementation, for more information, see the following article, for more information, see

Welcome page for applets

Most apps on the market have a welcome page. the following shows how to implement a welcome page through a applet.

The following is an introduction in the following order:

Layout implementation

Logical implementation

Style implementation

1. layout implementation

The entire layout is implemented using the swiper sliding View. each item in the sliding view is enclosed by a block. each item in the sliding view contains an image and a button.

  
     
       
         
          
    Try now     
       
    
 

2. logical implementation

An imgs array is prepared in data, and the address of the three images is stored in the array. here, a start function is provided to listen to button click events on the interface.

Wx. navigateTo: This api is used to jump to the interface and return buttons. the url is used to specify the jump interface.

    Page({    data:{      imgs:[        "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",        "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",        "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",      ],      img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",    },    start(){       wx.navigateTo({        url: '../home/home'      })      // wx.redirectTo({ url: '../index/index' })    },   })

3. style implementation

The swiper style defines the sliding control style: the position of the sliding control is absolute layout, and the width and height are full of the entire screen.

The. swiper-image style defines the image style. the width and height are full of the entire screen, and the transparency is 0.9.

. The button-img style defines the style of the button. the position is absolute layout, 90px away from the bottom, and the transparency is 0.6 ,..

Swiper {/* This is an absolute layout */position: absolute; height: 100%; width: 100% ;}. swiper-image {height: 100%; width: 100%;/* Transparency */opacity: 0.9 ;}. button-img {/* This is an absolute layout */position: relative; bottom: 90px; height: 40px; width: 120px; opacity: 0.6 ;}

4. View Results