微信小程序 realizes the left and right sliding effect of the card

It’s a quick holiday, and there aren’t many people talking about it. Look at the renderings first.

思路

From the above renderings, the basic needs include:

When sliding to a certain distance, move the position of a card in the corresponding direction. There is a certain acceleration when the card slides. If the sliding distance is too small, it will remain in the current card and there is a rebound effect.

Seeing such a demand, students who are not familiar with 小程序 may feel a little troublesome. First need to calculate the position of the card to make 软件

, then set the position of the scroll bar to scroll to the specified position, and add a little acceleration during the scrolling process.

However, when you look at the development documentation for 小程序, you will find that 小程序 has already written it for us in advance, we just need to do the relevant settings.

实现

滚动视图

Sliding left and right is actually a horizontal scroll. 小程序 gives us the scroll-view component, which we can scroll horizontally by setting the scroll-x property.

关键属性

In the scroll-view component property list, we found two key properties:

Property type description scroll-into-viewxx