The preface

We received a lot of feedback, and the solution described below is not an optimal solution. To achieve this effect, you can directly use the Swiper component of wechat applet. The following implementation scheme, only provide a way of thinking, interested can see, or skip.

preface

Look at the renderings first.

Train of thought

From the renderings above, the basic requirements include:

  • Slide left and right to a certain distance to move a card position in the corresponding direction.
  • The card slides with a certain acceleration.
  • If the slide distance is too small, it will remain on the current card and have a rebound effect.

See such requirements, unfamiliar with the small program students, may feel a little trouble. First you need to calculate the position of the card, and then set the position of the scroll bar, so that it scrolls to the specified position, and in the process of scrolling, add a little acceleration…

However, when you look at the development documentation of the applet, you will find that the applet has been written for us in advance, and we just need to make the relevant Settings.

implementation

Scroll to view

Sliding left to right is just horizontal scrolling. The applet provides us with the scrollview component, which we can scroll horizontally by setting the scrollx property.

Key attributes

In the scroll View component property list, we find two key properties:

attribute type instructions
scroll-into-view string The value should be some child element ID (id cannot start with a number). You scroll to the element in which direction you can scroll
scroll-with-animation boolean Use animated transitions when setting the scrollbar position

With these two attributes, we get things done easily. As long as each card exclusive page, and set the element ID, you can easily achieve the page turning effect.

Swipe left and right to judge

Here, we use the start and end of the touch to determine the slide direction.

Wechat applet provides us with touchStart and TouchEnd events. We can judge the direction by judging the abscissa of the start and end.

Code implementation

Talk is cheap, show me the code.

  • card.wxml
<scroll-view class="scroll-box" scroll-x scroll-with-animation
  scroll-into-view="{{toView}}"
  bindtouchstart="touchStart"
  bindtouchend="touchEnd">
    <view wx:for="{{list}}" wx:key="{{item}}" class="card-box" id="card_{{index}}">
      <view class="card">
        <text>{{item}}</text>
      </view>
    </view>
</scroll-view>
Copy the code
  • card.wxss
page{
  overflow: hidden;
  background: #0D1740;
}
.scroll-box{
  white-space: nowrap;
  height: 105vh;
}

.card-box{
  display: inline-block;
}

.card{
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 80vh;
  width: 80vw;
  margin: 5vh 10vw;
  font-size: 40px;
  background: #F8F2DC;
  border-radius: 4px;
}
Copy the code
  • card.js
const DEFAULT_PAGE = 0;

Page({
  startPageX: 0,
  currentView: DEFAULT_PAGE,
  data: {
    toView: `card_${DEFAULT_PAGE}`,
    list: ['Javascript'.'Typescript'.'Java'.'PHP'.'Go']
  },

  touchStart(e) {
    this.startPageX = e.changedTouches[0].pageX;
  },

  touchEnd(e) {
    const moveX = e.changedTouches[0].pageX - this.startPageX;
    const maxPage = this.data.list.length - 1;
    if (Math.abs(moveX) >= 150){
      if(moveX > 0) { this.currentView = this.currentView ! = = 0? this.currentView - 1 : 0; }else{ this.currentView = this.currentView ! == maxPage ? this.currentView + 1 : maxPage; } } this.setData({ toView: `card_${this.currentView}`}); }})Copy the code
  • card.json
{
  "navigationBarTitleText": "Card slide"."backgroundColor": "#0D1740"."navigationBarBackgroundColor": "#0D1740"."navigationBarTextStyle": "white"
}
Copy the code

conclusion

Above, if there are mistakes, welcome to correct! Hopefully, it’s a little informative.

Happy Labor Day and happy holidays (if you have one).

@Author: TDGarden