Введение

Предположительно, у многих людей есть опыт походов в кино со своими парнями и девушками.Ты должен спрашивать мнение своей девушки или парня каждый раз, когда выбираешь место, что? Не спрашивать? ! Тогда все готово!

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

Эффект просмотра следующий:

效果图.png

Если вам интересно, пожалуйста, продолжайте читать!

1. Данные компонента

Прежде всего, нам нужно передать компоненту два данных, которые будут использоваться при отображении компонента: один — это номер зала кинотеатра, а другой — массив мест, как показано ниже:

Зал: Числовая строковая заглавная буква

Данные о сидении: решетка массива, левые и правые пробелы представлены 0, обычные сиденья представлены 1, предпочтительные сиденья представлены 2, а сиденья, которые были выбраны другими аудиториями, представлены 3. Начальные данные являются следующими:

Файл js компонента должен объявлять переданные данные, что отличается от метода объявления страницы.Тип данных должен быть записан в свойствах компонента для объявления данных.

  properties: {
    seatings: Array,
    hallNumber: String
  },

2. Макет страницы компонента

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

1. Состав зоны идентификации

Эта область в основном используется в качестве напоминания, запрашивая информацию о месте, включая обычную область и предпочтительную область.Конечно, код может напрямую украсть стиль WXSS мест в зоне отдыха и использовать знаки_нормальный и сиденье_Отлично имена классов для реализации. Конечно, кому не нравится позиция C~

    <view class="signs_normal">
      <view class="seatNormal"></view> <text>普通区</text> 
    </view>
    <view class="signs_excellent">
      <view class="seatExcellent"></view> <text>优选区</text> 
    </view>
  </view>

композиция зоны отдыха

Эта часть разделена на три небольшие части: экран, введение в кинозал и зона отдыха, слушайте меня внимательно!

2.1 Экран фильма:

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

<view class="visual_screen">
   <view class="screen"></view>
</view>

wxs выглядит следующим образом:

.visual_screen {
  height: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10rpx;
}
.screen {
  margin-top: 0;
  padding: 0;
  height: 30vw;
  width: 100vw;
  box-sizing: border-box;
  border: 15rpx solid #c9cdd3;
  border-radius: 50%;
}

2.2 Знакомство с кино:

Эта часть относительно проста, напрямую вставляйте передаваемые данные и точно настраивайте стиль.

wxml:
<view class="visual_title">{{hallNumber}}号厅-（请佩戴口罩、1.3米以上儿童购票）</view>
wxss：
.visual_title {
  font-size: 23rpx;
  width: 100%;
  height: 20rpx;
  text-align: center;
  color: #6d6d6d;
  margin-bottom: 30rpx;
}

2.3 Зона отдыха:

в основном построить:

базовый блок: Так как в качестве базовой единицы vw задана ширина сиденья, то удобно унифицировать единицу и модель, поэтому здесь я также рассчитываю высоту в vw.
стиль сиденья: Из переданного ранее массива мест мы знаем, что у нас есть пять типов мест, а именно: seatNormal (обычное место), seatExcellent (предпочтительное место), seatNone (пустое место), seatChosen (невыбираемое место) и selected (текущее место) Selected seat. ), базовые стили сидений тут одинаковые и их можно унифицировать, а потом писать свои уникальные стили отдельно. Пустое место может достичь эффекта, если установлен прозрачный цвет границы.

.seatNormal, .seatExcellent, .seatNone, .seatChosen {
  height: 4vw;
  width: 4vw;
  margin: 1vw;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.seatNormal {
  border: 1rpx solid #63c0c0;
}
.seatChosen {
  border: 1rpx solid red;
  background-color: red;
}
.selected {
  border: 1rpx solid #05ca90;
  background-color: #05ca90;
}
.seatExcellent {
  border: 1rpx solid #f18e14;
}
.seatNone {
  border: 1rpx solid rgba(0, 0, 0, 0);
}

рекомендоватьПолезные стили: В wxss мы используем очень полезный стиль "box-sizing: border-box;", этот стиль устанавливает ширину и высоту элемента для определения границы элемента. То есть любые отступы и границы, указанные для элемента, будут отображаться в пределах заданной ширины и высоты, а ширина и высота содержимого будут получены путем вычитания границ и отступов соответственно из заданных ширины и высоты. размер.

Генеральный план: в области сиденья используется гибкая компоновка display: flex и flex-wrap: wrap для автоматического обтекания сиденья, когда оно заполнено.Большая коробка оборачивает коробку, а коробка внутри гибко центрируется для достижения общего эффекта центрирования.

.visual_seatings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43vw;
}
.visual_seating {
  width: 90%;
  height: 43vw;
  display: flex;
  flex-wrap: wrap;
}

Подвижная масштабируемая область: В связи с удобством выбора места, мы установили область сиденья, которая может перемещаться и масштабироваться двумя пальцами, поэтому нам нужно использовать API апплета WeChat:movable-areaа такжеmovable-view.

movable-area:Для этой области должны быть заданы свойства ширины и высоты. Если они не установлены, по умолчанию используется значение 10 пикселей. В то же время, когда подвижное представление меньше подвижной области, диапазон перемещения movable-area, и когда movable-view больше, чем movable-area , диапазон перемещения movable-view должен включать movable-area (направление оси x и направление оси y рассматриваются отдельно).

подвижный вид:Атрибут label задает направление движения во всех направлениях direction="all"; поддерживает масштабирование масштабом = "{{true}}"; максимальное и минимальное масштабирование, кратное масштабу-min="0,3" и масштабу-max="1,5" "; если вы хотите, условия триггера привязки также могут добавлять методы привязки, события привязки перетаскивания: bindchange, масштабирование событий привязки bindscale и т. д.

little tips:Поскольку область подвижного вида увеличена, координаты x и y остаются неизменными, что приведет к тому, что область просмотра превысит площадь области.Чтобы подвижная область вида не закрывала элементы выше, вы можете уменьшите верхний предел увеличения и добавьте немного выше Пустое пространство, увеличьте эстетику страницы.
Подробную информацию об использовании см. в руководстве на официальном веб-сайте программы WeChat Mini:Developers.WeChat.QQ.com/mini программа…

3. Бизнес-логика компонента

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

выбрать место: чтобы добиться этого, когда пользователь нажимает на место, стиль места изменяется и данные о месте записываются.
В первую очередь необходимо передать в цикле данные индекса wx:for="{{сидения}}" wx:key="Index" data-index="index", привязать выбранное событие в представлении каждого места , в js Данные нижнего индекса принимаются в файле selected method;

Нам нужно использовать два данных об общем количестве выбранных мест (ограничено шестью) и массив индексов (для хранения мест, которые были нажаты), поэтому мы объявляем selectedIndex: [ ], selectedNum: 0 в данных и объявляем метод в методах метод ;

Логика выбранного метода: сначала сохранить индекс индекса, и определить, существует ли элемент в массиве индексов (используя метод indexOf() массива), Если выделенный массив удаляется, общее количество выбранных мест уменьшается на единицу, в противном случае оценивается, меньше ли общее количество выбранных мест 6, а если меньше 6, то данные подставляются в массив, и общее количество выбранных мест увеличивается на единицу, а не меньше, чем приглашение выбрать максимум шесть билетов;

В настоящее время у нас есть данные в таблице ниже, и мы можем выполнять все более сложные бизнес-операции! !

tip: Поскольку у массива нет метода для удаления элемента, также объявлен метод remove(), который сначала получает индекс элемента, а затем удаляет его.

selected(e) {
      let index = e.currentTarget.dataset.index;
      if(this.data.selectedIndex.indexOf(index) != -1){
        let selectedIndex =  this.remove(this.data.selectedIndex, index);
        let selectedNum = this.data.selectedNum - 1;
        this.setData({
          selectedIndex,
          selectedNum
        })
      }else{
        if(this.data.selectedNum < 6){
        let selectedNum = this.data.selectedNum + 1;
        let selectedIndex = this.data.selectedIndex.concat(index);
            this.setData({
              selectedIndex,
              selectedNum
            })
        }else{
            wx.showToast({
              title: '最多选择六张票',
              })
            }
        }
    },
    remove(arr, ele) {
      var index = arr.indexOf(ele); 
      if (index > -1) { 
      arr.splice(index, 1); 
        }
        return arr;
      }

Выбранный стиль изменен: в представлении места мы используем тернарный оператор для оценки данных: class="{{tools.indexOf(selectedIndex, index)?'selected': ''}}"
Если предыдущий результат верен, то есть индекс этих данных существует в массиве, добавляется выбранное имя класса и изменяется стиль сиденья, в противном случае добавляется пустое имя класса.

tips: Поскольку метод indexOf массива недопустим в wxml, нам нужно объявить функцию indexOf в папке util каталога страниц того же уровня для вызова тернарной операции, чтобы мы могли сделать это сами! При его использовании вам нужно только объявить его через wxs src="../../util/indexof.wxs" module="tools", вы можете использовать метод tools.indexOf, эффект такой же, как у indexOf метод, который поставляется с массивом~

// indexOf方法
function indexOf(arr, value) {
  if (arr.indexOf(value) < 0) {
      return false;
  } else {
      return true;
  }
}
module.exports.indexOf = indexOf;

Если вам нужен исходный код конкретного компонента, загрузите его в gitee!
git ee.com/kean-smith/so…

Если вы считаете, что эта статья была вам полезна, поддержите ее и поставьте лайк ❤!!