微信小程序實現卡片左右滑動效果

前言

快放假了,人狠話很少,啥也不說了。先看效果圖。html

思路

從上面的效果圖來看,基本的需求包括:json

  • 左右滑動到必定的距離,就向相應的方向移動一個卡片的位置。
  • 卡片滑動的時候有必定的加速度。
  • 若是滑動距離過小,則依舊停留在當前卡片,並且有一個回彈的效果。

看到這樣的需求,不熟悉小程序的同窗,可能感受有點麻煩。首先須要計算卡片的位置,而後再設置滾動條的位置,使其滾動到指定的位置,並且在滾動的過程當中,加上一點加速度...小程序

然而,當你查看了小程序的開發文檔以後,就會發現小程序已經幫咱們提早寫好了,咱們只要作相關的設置就行。微信小程序

實現

滾動視圖

左右滑動,其實就是水平方向上的滾動。小程序給咱們提供了scroll-view組件,咱們能夠經過設置scroll-x屬性使其橫向滾動。bash

關鍵屬性

在scroll-view組件屬性列表中,咱們發現了兩個關鍵的屬性:微信

屬性 類型 說明
scroll-into-view string 值應爲某子元素id(id不能以數字開頭)。設置哪一個方向可滾動,則在哪一個方向滾動到該元素
scroll-with-animation boolean 在設置滾動條位置時使用動畫過渡

有了以上這兩個屬性,咱們就很好辦事了。只要讓每一個卡片獨佔一頁,同時設置元素的ID,就能夠很簡單的實現翻頁效果了。xss

左滑右滑判斷

這裏,咱們經過觸摸的開始位置和結束位置來決定滑動方向。flex

微信小程序給咱們提供了touchstart以及touchend事件,咱們能夠經過判斷開始和結束的時候的橫座標來判斷方向。動畫

代碼實現

Talk is cheap, show me the code.this

  • 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>
複製代碼
  • 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;
}
複製代碼
  • 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}`
    });
  }
})
複製代碼
  • card.json
{
  "navigationBarTitleText": "卡片滑動",
  "backgroundColor": "#0D1740",
  "navigationBarBackgroundColor": "#0D1740",
  "navigationBarTextStyle": "white"
}
複製代碼

總結

以上,若有錯漏,歡迎指正!但願能讓你們有點收穫。

最後祝各位搬磚工程師勞動節快樂,假期愉快(若是你有的話)。

@Author: TDGarden

相關文章
相關標籤/搜索