Question

我在nuxt中实现上一个和下一个问题

在我的模板中，我有这个

<template>
  <div class="mt-8">
    <div class="flex justify-between">
      <h4 class="title text-orange-500 font-semibold">
        <span>POPULAR MOVIES</span>
      </h4>
      <h4 class="title text-orange-500">
        <span>Page: {{ currentPage }} of {{ totalPages }}</span>
      </h4>
    </div>
    <div class="popular grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
      <Moviecards
        v-for="(movie, index) in popularmovies"
        :key="index"
        :movie="movie"
        :data-index="index"
      />
    </div>
    <div class="flex space-x-4 justify-center mt-8">
      <span v-if="currentPage === null">
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l ml-8 cursor-not-allowed">
          Prev
        </button>
      </span>
      <span v-else>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l ml-8" @click="currentPage--">
          Prev
        </button>
      </span>
      <span v-if="currentPage === totalPages">
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r mr-8 cursor-not-allowed">
          Next
        </button>
      </span>
      <span v-else>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r mr-8" @click="next">
          Next
        </button>
      </span>
    </div>
  </div>
</template>

在我的脚本中我有这个

<script>
import Moviecards from '@/components/Moviecards.vue'

export default {
  components: {
    Moviecards
  },
  data () {
    return {
      prevpage: null,
      nextpage: null,
      currentPage: 1,
      pageNumbers: [],
      totalPages: 0,
      popularmovies: []
    }
  },
  methods: {
    next () {
      this.currentPage += 1
    },
    previous () {
      this.currentPage -= 1
    }
  },
  // eslint-disable-next-line vue/order-in-components
  async fetch () {
    const popularmovies = await fetch(
      `https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_SECRET}&page=${this.currentPage}`
    ).then(res => res.json())
    this.totalPages = popularmovies.total_pages
    this.popularmovies = popularmovies.results
  }

下一个方法起作用，currentPage增加一个，前一个减少一个。但是我无法更新API调用URL，我假设在请求页面时已将其加载。我需要帮助找出解决方法。谢谢。

Answer 1

您可以使用以下代码解决此问题

let pages = getCurrentPages();
 let beforePages = pages[pages.length - 2];//the before pages object 
 console.log(beforePages);

Answer 2

也许您可以尝试以下代码，这可能会解决您的问题

<template>
    <ul class="app-pagination">
        <template v-if="url">
            <li v-show="(current > Math.ceil(showItem / 2)) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${1}`">
                   Main
                </nuxt-link>
            </li>
            <li v-show="current != 1" @click="current--">
                <nuxt-link :to="`${url}${current - 1}`">
                    Previous
                </nuxt-link>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}">
                <nuxt-link :to="`${url}${index}`">
                    {{ index }}
                </nuxt-link>
            </li>
            <li v-show="pageSize * current <= total " @click="current++">
                <nuxt-link :to="`${url}${current + 1}`">
                    Next
                </nuxt-link>
            </li>
            <li v-show="(current < totalPage) && (totalPage > showItem)">
                <nuxt-link :to="`${url}${totalPage}`">
                    last page
                </nuxt-link>
            </li>
            <li class="total">
                <a href="javascript:void(0)"> {{ total }} </a>
            </li>
        </template>
        <template v-else>
            <li @click="goto('start')">
                <a href="javascript:void(0)">Index</a>
            </li>
            <li v-show="current != 1" @click="goto('prev')">
                <a href="javascript:void(0)">Previous</a>
            </li>
            <li v-for="index in pages" :key="index" :class="{'active':current == index}" @click="goto(index)">
                <a href="javascript:void(0)">{{ index }}</a>
            </li>
            <li v-show="totalPage != current && total != 0 && total != current" @click="goto('next')">
                <a href="javascript:void(0)">Next</a>
            </li>
            <li @click="goto('end')">
                <a href="javascript:void(0)">Last Page</a>
            </li>
            <li class="total">
                <a href="javascript:void(0)">{{ total }}</a>
            </li>
        </template>
    </ul>
</template>
<script>
export default {
    name: 'AppPager',
    props: {
        url: { //Pagination link
            required: false,
            type: [String],
            default: null
        },
        total: {
            required: false,
            type: [Number],
            default: 0
        },
        page: {
            required: false,
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            current: 1,
            showItem: 5,
            pageSize: 8
        };
    },
    computed: {
        pages() {
            let pag = [];
            // Starting number
            let left = 1;
            // Ending number
            const totalPage = this.totalPage;
            let right = totalPage;
            let middle = Math.ceil(this.showItem / 2);
            if (totalPage >= this.showItem) {
                // In the middle, we add it to both sides（middle-1)
                if (this.current > middle && this.current < totalPage - (middle - 1)) {
                    left = this.current - (middle - 1);
                    right = this.current + (middle - 1);
                } else {
                    //Far left or in the middle of condition
                    if (this.current <= middle) {
                        left = 1;
                        right = this.showItem;
                        // On the far right
                        // The end is the total number of items, and the beginning is condition minus 1
                    } else {
                        right = totalPage;
                        left = totalPage - (this.showItem - 1);
                    }
                }
            }
            while (left <= right) {
                pag.push(left);
                left++;
            }
 
            //total pages
            console.log(pag);
            return pag;
        },
 
        /**
         * Calculate the total number of pages according to the total number of articles
         */
        totalPage() {
            return this.total % this.pageSize ? Math.floor(this.total / this.pageSize) + 1 : this.total / this.pageSize;
        }
 
    },
    watch: {
        page: {
            handler(old, val) {
                this.current = Number(old);
            },
            immediate: true
        }
    },
    methods: {
        goto(index) {
            if (index == 'start') {
                this.current = 1;
                this.$emit('page', 1);
            } else if (index == 'end') {
                this.current = this.totalPage;
                this.$emit('page', this.totalPage);
            } else if (index == 'prev') {
                this.current--;
                this.$emit('page', this.current);
            } else if (index == 'next') {
                this.current++;
                this.$emit('page', this.current);
            } else {
                this.$emit('page', index);
            }
        }
    }
};
</script>
<!-- this is less code -->
<style lang="less" scoped>
.app-pagination{
    margin: 40px auto;
    text-align: center;
    li{
        display: inline-block;
        margin: 0 6px;
        a{
            padding: 8px;
            display: inline-block;
            color: #626262;
            &:hover{
                color: #FFB400;
            }
        }
        &.active a{
            color: #FFB400;
        }
        &.total a{
            color: #FFB400;
        }
    }
}
</style>

使用Nuxt实现Previos和Next Page

2 个答案: