Апплет WeChat реализует эффект скольжения карты влево и вправо

внешний интерфейс Апплет WeChat

Предисловие

Было получено много отзывов, и описанное ниже решение действительно не является оптимальным. Для достижения этого эффекта вы можете напрямую использовать компонент swiper апплета WeChat. Следующая схема реализации дает только одну идею, вы можете взглянуть на нее, если вам интересно, или пропустить ее.

предисловие

Сначала посмотрите на рендеры.

идеи

Из приведенных выше визуализаций основные требования включают в себя:

  • Проведите пальцем влево и вправо на определенное расстояние, чтобы переместить позицию карты в соответствующем направлении.
  • Есть определенное ускорение, когда карта скользит.
  • Если расстояние скольжения слишком мало, она все равно останется на текущей карте, и возникнет эффект отскока.

Увидев такой спрос, студенты, не знакомые с мини-программами, могут почувствовать себя немного беспокойно. Сначала нужно рассчитать положение карты, а затем установить положение полосы прокрутки для прокрутки до заданной позиции, и добавить небольшое ускорение в процессе прокрутки...

Однако, когда вы проверите документацию по разработке апплета, вы обнаружите, что апплет был написан для нас заранее, и нам нужно только сделать соответствующие настройки.

выполнить

вид прокрутки

Пролистывание влево и вправо на самом деле прокручивает в горизонтальном направлении. Апплет предоставляет намscroll-viewкомпонента, мы можем заставить его прокручиваться горизонтально, установив свойство scroll-x.

ключевой атрибут

В списке свойств компонента scroll-view мы обнаружили два ключевых свойства:

Атрибуты Типы иллюстрировать
scroll-into-view string Значение должно быть некоторым идентификатором дочернего элемента (идентификатор не может начинаться с цифры). Установите, в каком направлении можно прокручивать, затем прокрутите до элемента, в каком направлении
scroll-with-animation boolean Используйте анимированные переходы при установке положения полосы прокрутки

С двумя вышеупомянутыми свойствами мы можем сделать хорошую работу. Пока каждая карта имеет эксклюзивную страницу и одновременно устанавливается идентификатор элемента, можно легко добиться эффекта перелистывания страниц.

Проведите пальцем влево и вправо, чтобы судить

Здесь мы определяем направление скольжения по начальной позиции и конечной позиции касания.

Апплет WeChat предоставляет нам события touchstart и touchend, и мы можем судить о направлении, оценивая ось абсцисс в начале и конце.

Код

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>
  • 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

Категории