Vue에서 페이징 구성 요소를 구현하는 방법-JS 튜토리얼-php.cn

Vue에서 페이징 구성 요소를 구현하는 방법

亚连

풀어 주다： 2018-06-15 15:07:21

원래의

1459명이 탐색했습니다.

이 글에서는 주로 Vue의 페이징 구성 요소에 대한 샘플 코드를 소개하고 참고할 수 있도록 하겠습니다.

페이징 구성 요소는 프로젝트에서 자주 사용됩니다. 이전에는 항상 인터넷에서 사용할 jq 컨트롤을 찾았습니다(이스케이프...). 최근 여러 프로젝트에서 Vue를 사용했는데 프로젝트에 페이징 기능이 필요했습니다.

page.vue 파일은 PC측 페이징 컴포넌트로 기본적인 페이징 기능을 가지고 있으며, 기본적으로는 페이지에 데이터가 표시되므로 해당 데이터를 직접 조작하여 뷰를 변경할 수 있습니다

시작하기

import Page from './page.vue' 디렉토리에서 파일을 가져와서 상위 컴포넌트에 등록하세요.

<page :total=&#39;total&#39; :current-index="currentIndex" :listLen=&#39;listLen&#39; @getPage=&#39;getPage&#39;></page>

로그인 후 복사

total: 전체 페이지 번호
currentIndex: 현재 페이지 번호
listLen: 몇 개. 페이지 UI가 표시해야 하는 페이지 목록
getPage: 페이지 구성 요소는 각 이벤트의 페이지 번호를 상위 구성 요소로 보냅니다. 이는 관련 요청을 백그라운드로 보내 콘텐츠

page.vue

html을 표시하는 데 사용됩니다. part

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

로그인 후 복사

관련 데이터 설명

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

로그인 후 복사

methods 이벤트, 주요 아이디어는 현재 목록 페이지의 첫 번째 항목과 마지막 항목을 결정하는 것입니다. arr 멤버의 값을 변경하려면

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

로그인 후 복사

I. 이전에 ember.js로 유사한 컴포넌트를 작성했는데 이제는 vue2.0을 기반으로 패키징되었습니다. 이는 향후 다양한 프로젝트에 편리하고 직접 사용할 수 있습니다.

간단한 요약: 이전에 ng4를 접한 적이 있습니다. 이러한 유사한 프레임워크는 전환 애니메이션을 제외하고 페이지 표시는 백그라운드에서 전송되거나 프런트 엔드에서 시뮬레이션되는 데이터를 통해 렌더링된다는 사실을 발견했습니다. 물론 이는 통신의 작은 부분일 뿐이며 기본 아이디어이기도 합니다. 이런 종류의 프레임워크입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.