基於vue2.0的一個分頁元件

阿新 • • 發佈：2019-01-13

分頁元件在專案中經常要用到之前一直都是在網上找些jq的控制元件來用(逃..),最近幾個專案用上vue了專案又剛好需要一個分頁的功能。於是百度發現幾篇文章介紹的實在方式有點複雜，
沒耐心看自己動手造輪子寫了一個，用vue的計算屬性去實現真正的邏輯程式碼大約在20行左右相當好理解現實原理簡單沒什麼好介紹的直接上程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-router</title>

  <script src="./vue.js" ></script>
  <style>
  body{
      font-family:"Segoe UI";
    }
    li{
      list-style:none;
    }
    a{
      text-decoration:none;
    }
    .pagination {
        position: relative;

      }
      .pagination li{
        display: inline-block;
        margin:0 5px;
      }
      .pagination li a{
        padding:.5rem 1rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#fff;

        color:#0E90D2;
      }
      .pagination li a:hover{
        background:#eee;
      }
      .pagination li.active a{
        background:#0E90D2;
        color:#fff;
      }
  </style>
</head>
<body>
    <script type="text/x-template" id="page">
        <ul class="pagination" >
            <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一頁</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="#" >{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一頁</a></li>
        </ul>
    </script>
    <div id="app">
          <page></page>
    </div>





<script>

  Vue.component("page",{
      template:"#page",
        data:function(){
          return{
            current:1,
            showItem:5,
            allpage:13
          }
        },
        computed:{
          pages:function(){
                var pag = [];
                  if( this.current < this.showItem ){ //如果當前的啟用的項 小於要顯示的條數
                       //總頁數和要顯示的條數那個大就顯示多少條
                       var i = Math.min(this.showItem,this.allpage);
                       while(i){
                           pag.unshift(i--);
                       }
                   }else{ //當前頁數大於顯示頁數了
                       var middle = this.current - Math.floor(this.showItem / 2 ),//從哪裡開始
                           i = this.showItem;
                       if( middle >  (this.allpage - this.showItem)  ){
                           middle = (this.allpage - this.showItem) + 1
                       }
                       while(i--){
                           pag.push( middle++ );
                       }
                   }
                 return pag
               }
      },
      methods:{
        goto:function(index){
          if(index == this.current) return;
            this.current = index;
            //這裡可以傳送ajax請求
        }
      }
    })

var vm = new Vue({
  el:'#app',
})



</script>
</body>
</html>

基於vue2.0的一個分頁元件

分頁元件在專案中經常要用到之前一直都是在網上找些jq的控制元件來用(逃..),最近幾個專案用上vue了專案又剛好需要一個分頁的功能。於是百度發現幾篇文章介紹的實在方式有點複雜，沒耐心看自己動手造輪子寫了一個，用vue的計算屬性去實現真正的邏輯程式碼大約在20行左右相當好理解現實原理簡單沒什麼好介紹的直接上程

vuejs2.0實現分頁元件，使用$emit進行事件監聽資料傳遞

上一篇文章介紹了vuejs實現的簡單分頁，如果我有幾個頁面都需要有分頁效果，不可能每個頁面都去複製一下這段程式碼吧，意思是封裝一下，變成通用的元件。https://segmentfault.com/a/1190000008446707 首先使用基礎 Vue 構造器

vue2自定義分頁元件，可設定每頁顯示數量，指定跳轉具體頁面

分頁元件 <template> <div> <div class="page-helper" v-if="showPageHelper"> <div class="page-list">

vue實現一個分頁元件

Vue.component("page",{ template:"#page", data:function(){ return{ current:1, showItem:5, al

用vuejs寫一個分頁元件

今天記錄用vuejs2來寫一個分頁元件有些註解定義我說的並不是很準確，主要是方便自己理解寫的，請大家包涵 ...程式碼的github網址 : https://github.com/fengliting/

基於vue2.0實現仿百度前端分頁效果（二）

前言上篇文章中，已經使用vue實現前端分頁效果，這篇文章我們單獨將分頁抽離出來實現一個分頁元件先看實現效果圖程式碼實現按照慣例，我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

分享一個基於vue2.0+的拖動排序元件

先來個效果圖：元件的實現是基於改變源資料的陣列位置，所以使用的話必須要對傳進去的源資料做一次深拷貝，操作完成後再傳排序後的陣列回去；事件是採用了drag系列事件，跟需求和使用者操作習慣比較吻合；圖示是element-ui裡面的；過度效果是vue的transition-group

基於vue2.0的一個豆瓣電影App

即將 tle count webp bad string random current strong 1、搭建項目框架使用vue-cli 沒安裝的需要先安裝 npm intall -g vue-cli 使用vue-cli生成項目框架 vue init webpack-s

100行程式碼實現一個vue分頁元件

今天用vue來實現一個分頁元件，總體來說，vue實現比較簡單，樣式部分模仿了elementUI。所有程式碼的原始碼可以再github上下載的到：下載地址先來看一下實現效果：點選檢視效果整體思路我們先看一下使用到的檔案的目錄：我們在 pageComponentsTe

基於Vue.js的表格分頁元件

最近小熙在做Vue有關的專案需要前端分頁外掛，看到篇不錯的，特此轉載分享有一段時間沒更新文章了，主要是因為自己一直在忙著學習新的東西而忘記分享了，實在慚愧。這不，大半夜發文更一篇文章，分享一個自己編寫的一個Vue的小元件，名叫BootPage。不瞭解Vue.js的

詳解基於Vue2.0實現的移動端彈窗(Alert, Confirm, Toast)元件

wc-messagebox 基於 vue 2.0 開發的外掛包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(樣式來源: MUI) 一些想法剛開始的時候想要用現成的彈窗元件來著, 但是查詢一圈沒有發現比較合適專

基於velocity的分頁元件

<form method="get" id="frm_search" class="form-inlineheadBar" method="post" action="/messageTaskList.htm"> <input ty

Vue 分頁元件 v2.0

背景之前也寫過一個分頁元件，非常簡潔的一個分頁元件。效果圖: 傳送門點選預覽程式碼也很簡單，看看就懂了。當頁數多起來的時候，問題也就來了。這.......迫不得已，我把頁碼顯示的去掉，就成了看著是沒啥問題，可是需求方不樂意了。。。他們

基於Bootstrap的分頁元件bootstrap-pager使用說明

bootstrap-pager 本元件主要使用在扁平風格頁面的自定義分頁，做到頁面顯示和分頁元件分離。本分頁元件在JavaCode中應用。鏈家網房屋資訊查詢分頁、拉鉤大鯤專案的分頁都使用類似的分頁元件。使用 Step1：引用樣式

基於 Vue2.0 的移動端 / PC 端驗證碼輸入元件.

vue-input-code 基於Vue2.0的移動端驗證碼輸入元件. 功能預覽輸入回撥完成回撥自定義驗證碼個數樣式可控支援支援 Vue.js 2.0+. 安裝和使用 npm install vue-input-code --save 作為全域性元件

基於vue2.0實現音樂/視訊播放進度條元件的思路及具體實現方法+程式碼解釋

基於vue2.0實現音樂/視訊播放進度條元件的方法及程式碼解釋需求分析： ①：進度條隨著歌曲的播放延長，歌曲播放完時長度等於黑色總進度條長度；時間實時更新。 ②：當滑動按鈕時，實時更新播放時間，橙色進度條長度也會隨著按鈕的滑動而改變，當滑動結束時，橙色區域停留在滑動結束的

基於vue2.0以及better-scroll實現scroll滑動元件及所實現元件的應用例子

直接上原始碼：元件：scroll.vue，需要先npm install better-scroll <template> <div ref="wrapper"> <slot></slot> </div&

Yii2.0 的分頁顯示設置

顯示 -1 log ges 分頁什麽 image 設置 blog 這是框架自帶的分頁顯示的樣式，雖然不知道為什麽這樣顯示，不過先記錄下來吧 Yii2.0 的分頁顯示設置

項目中的一個分頁功能pagination

log item -c 重新 ota cal isp business time 項目中的一個分頁功能pagination <script> //總頁數 var total = 0; var pageCount = 0

vue2.0一個書城實例

web 加載增加輪播圖 e-book 點擊 ref git 懶加載 gitHub地址 https://github.com/Webxiaoyaun/vue-book/tree/master/vue-book 點擊去Github下載 ## 一個書城## 有增加

基於vue2.0的一個分頁元件

相關推薦