“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

1, the background

The company’s mobile terminal currently has Android and small program two, the boss requires small program with Android implementation to be basically consistent.

Android usually has a welcome page when the app launches.

As shown below, the effect is achieved.

Of course, it is best to put the welcome page images on the server, after all, the applet side of the package size is limited.

2, implementation,

Now let’s see how this effect works.

From the renderings above, you can see that there is one main thing that is done here:

Slide the view left and right to display different images.

So is there a component in an applet that can switch views left and right?

The answer is:

Swiper – item component

Slider view container, and only swiper-Item components can be placed inside it.

Okay, now that this component works, let’s put it together.

2.1 Layout Code

<swiper > <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item" > <swiper-item class="swiper-items" > <image class="swiper-image" src="{{item}}"></image> <button class="button-img" Bindtap ="jumpLogin" wx:if="{{index == imgs.length-1}}" </button> </swiper-item> </block> </swiper>Copy the code

Wx :for=”{{imgs}}” loops around the swiper-Item component.

That is, there are several image data in imGS and several image data in swiper-Item.

Another thing to note is that a button has been added to the last image, as shown below:

When you click on this image, you jump to it.

2.2 Style Code

swiper { position: absolute; height: 100%; width: 100%; } .swiper-image { height: 100%; width: 100%; Opacity: 0.9; } .button-img{ position: relative; bottom: 85px; height: 40px; width: 120px; opacity:0; }Copy the code

The style code is relatively simple and I won’t go into more detail.

2.3 Logical Code

data: {
    imgs:[
    'http://******WCFKd6AcgkDAAMQcOXZojM321.png',
    'http://******6AUz98AALDH9L_Pq4017.png',
    'http://******MQEjElqeQ315.png'
  ]
  },
Copy the code

The logic code is mainly defined in an IMGS array, used in the layout code to do loop use.

Well, that’s it for the welcome page if you want to implement a small program.