Для новичков во Vue: написать пейджер на Vue

внешний интерфейс Ресурсы изображений Icon Vue.js

Всегда хотел попробовать реализовать пейджер самостоятельно, но всё тянул, сегодня закончил писать, наверное в стиле NetEase Cloud Music. Этот небольшой пример очень прост.С помощью этого небольшого примера вы можете изучить использование вычисляемых свойств Vue и понять ситуации, которые необходимо различать при написании пейджера. В этой статье будет медленно реализовываться этот небольшой пример с нуля, я верю, что вы его изучите, и, прочитав мои идеи, возможно, у вас появятся идеи и идеи получше!

Достигаемый эффект следующий:

Во-первых, простая схема

<template>
  <div class="pageContainer">
    <ul class="pagesInner">
      <li class="page"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
      <li class="page" v-for="(item, index) in pages" :key="index">
        <span>{{item}}</span>
      </li>
      <li class="page"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    pages() {
      return 10;
    }
  }
};
</script>

Эффект следующий:

Есть два места, чтобы сказать:

  • Font awesome cdn для первой и двух последних иконок
  • Данные, отображаемые с помощью v-for, используют страницы в вычисляемом свойстве и временно записывают данные 11, поэтому отображаются 11 тегов.

Во-вторых, проясните мысль, в данном случае самое главное.

Пример в этой статье относится к методу пейджинга в NetEase Cloud Music, схема NetEase:

Он имеет несколько особенностей:

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

Три случая пейджинга:

Первый: когда текущий номер страницы меньше или равен 5

Как показано на рисунке:

При этом первая страница и последняя страница резервируются, а предпоследняя страница..., номер страницы считается от начала до конца.

Второй случай: когда текущий номер страницы находится в последних 5

Как показано на рисунке:

Первая страница и последняя страница все еще зарезервированы, номер второй страницы..., номер страницы считается от конца к началу

Третий случай: когда страница находится в среднем положении

Как показано на рисунке:

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

В-третьих, используйте код для достижения трех вышеуказанных ситуаций.

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

Сначала напишите первый случай:

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 50
    }
  },
  computed: {
    pages() {
      const c = this.currentPage
      const t = this.totalPages
      if (c <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
      }
    }
  }
};
</script>

Эффект следующий:

Напишите второй случай плюс if:

<script>
export default {
  data() {
    return {
      currentPage: 47,
      totalPages: 50
    }
  },
  computed: {
    pages() {
      const c = this.currentPage
      const t = this.totalPages
      if (c <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
      } else if (c >= t - 4) {
        return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
      }
    }
  }
};
</script>

Установите значение currentPage >= 46, эффект будет следующим:

Добавьте третий случай:

computed: {
    pages() {
      const c = this.currentPage
      const t = this.totalPages
      if (c <= 5) {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]  //第一种情况
      } else if (c >= t - 4) {
        return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t] //第二种情况
      } else {
        return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, '...', t]  //第三种情况
      }
    }
  }

Это в основном так, вы уже можете просмотреть изменения пейджера, изменив значение currentPage.

Затем щелкните соответствующий номер страницы, чтобы изменить значение currentPage, просто напишите событие щелчка и напишите функцию.

<li class="page" 
    v-for="(item, index) in pages" 
    :key="index"
    :class="{actived: item === currentPage}"   // 给点击到的当前页码添加样式
    @click="select(item)"     // 添加一个点击事件
>

...

methods: {
    select(item) {
        this.currentPage = item
    }
}

...

actived: {
    border-color: #2d8cf0;
    background-color: #2d8cf0;
    color: #fff;
}

Эффект следующий:

Чтобы сделать номер текущей страницы более понятным, добавьте текущее количество страниц к странице

<div>当前第{{currentPage}}页</div>

Эффект следующий:

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

Просто перепишите функцию выбора:

select(n) {
    if (n === this.currentPage) return 
    if (typeof n === 'string') return 
    this.currentPage = n
}

Это нормально.

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

<li class="page" @click="prevOrNext(-1)"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>

...

<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>

...

prevOrNext(n) {
    this.currentPage += n
}

Эффект следующий:

Эм, граничная проблема, когда currentPage равна 1, ее уже нельзя уменьшить, и нельзя добавить, когда она максимальна.

Перепишите код:

prevOrNext (n) {
  this.currentPage += n
  this.currentPage < 1
  ? this.currentPage = 1
  : this.currentPage > this.totalPages
    ? this.currentPage = this.totalPages
    : null
}

Вот он, как показано на рисунке:

4. Вывод

На этом основные функции этого пейджера закончены.Конечно, мы можем продолжать его инкапсулировать и использовать каждый раз, когда мы меняем currentPage.this.$emitУведомить внешний мир для достижения связи, вы также можете пройтиpropsДля передачи данных внутрь, таких как передача totalPages и т. д., это все содержимое, которое можно дополнительно улучшить. Самый важный момент, о конкретном методе расчета пейджера, я использовал самый глупый метод, поэтому, если вы знаете лучший способ, не забудьте оставить сообщение~

Это моя пятая статья о Наггетс, спасибо за просмотр!

Категории