Апплет WeChat реализует складывающееся и расширяющееся крутое меню

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

задний план

в этой статьеРуководство по трендам в дизайне 2018 годаЯ нашел хорошее меню, поэтому хотел реализовать его с помощью апплета WeChat.

Первая анимация

перейти к делу

ВышеNav

базовыйflexмакет плюсpaddingНет необходимости говорить больше, верно?

Следует отметить, что стиль заполнителя ввода в апплете WeChat написан наplaceholder-styleв или использоватьplaceholder-class

нижнее меню

  • Каждая маленькая карта следуетflexмакет, настройкиwidth: 50%,не забудьflex-wrap: wrap
  • Внутренняя часть каждой маленькой карточки одинаковаflexРазметка и установка центра по вертикали, подумав об этом или научно-популярных:
.main-view-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

flex чертовски прост в использовании

Фотографии внутри взяты изiconfontЯ взял сверху, и время на настройку этих цветов в десятки раз больше, чем время моего макета. …

анимация

Анимация апплета Wechat может использовать только JS, обычные методы недоступны, приходите к мозговому штурму

Соблюдая направление сгиба каждой карты, добавьте начальныйrotateЧтобы сделать его обратным, я определил здесь два класса.

.rotateX90{
  transform: rotateX(-90deg);
}
.rotateY90{
  transform: rotateY(-90deg);
}

Итак, вы не можете видеть карту, а затем добавить событие щелчка в кнопку меню, чтобы изменить поворот карты (динамически изменить класс), просто Ojbk, вот так

<view class='main-view-item rotateX90 item1 {{item1Style}}' animation='{{item1}}'></view>

На практике следует использоватьwx:forВыполнить циклический рендеринг

var duration = 150

var item1 = wx.createAnimation({
  duration: duration,
  transformOrigin: '0 0 0'
})

item1.rotateX(90).step()

this.setData({
  item1: item1,
  item1Style: 'item1Style'
})

Обратите внимание на регулировку здесьtransformOriginдля управления направлением складывания для следующих карт вcreateAnimationдобавлено вdelayполе (разницаdurationарифметическая последовательность)

Разве это не легко, а?

Что касается сворачивания меню, код аналогичен расширению, только наоборот, но порядок некоторых раскрытий такой же, как иtransformOriginСледует отметить, что вот код для его вставки:

var duration = 150

var item3 = wx.createAnimation({
  duration: duration,
  transformOrigin: '100% 100% 0',
  delay: duration * 2
})

item1.rotateX(90).step()

this.setData({
  item3: item3,
  item3Style: ''
})

Также яdataВ нем установлены две переменныеisShowа такжеisShowingчтобы определить, расширяется ли меню или расширяется, чтобы управлять событием клика, почти так

handleClick(){
  if(this.data.isShowing)
    return;
  else if(!this.data.isShow)
    this.showMenu()
  else
    this.hideMenu()
}

После завершения анимацииisShowа такжеisShowingПросто внесите изменения

Добро пожаловать, друзья, у которых есть лучшие идеи для обсуждения~

Категории