欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用VUE框架，實現(xiàn)列表分頁功能示例代碼

 更新時間：2017年01月12日 14:05:59   作者：充滿智慧的眼睛  
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

先來看一下效果圖：

這里寫圖片描述 

這里寫圖片描述 

這里寫圖片描述

功能描述：

1. 點擊頁面序號跳轉(zhuǎn)到相應(yīng)頁面；

2. 點擊單左/單右，向后/向前跳轉(zhuǎn)一個頁面；

3. 點擊雙左/雙右，直接跳轉(zhuǎn)到最后一頁/第一頁；

4. 一次顯示當(dāng)前頁面的前三個與后三個頁面；

5. 始終顯示最后一個頁面；

HTML：

 <!-- 分頁開始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
 <ul>
   <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> &lt;&lt; </a></li>
   <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> &lt; </a></li>

   <template v-for="index in indexs" >
     <li class="{{classRenderer(index)}}">
       <a v-on:click="btnClick(index)" >{{index}}</a>
     </li>
   </template>

   <li v-if="showMoreTail" class="crt">..</li>
   <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li>
   <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">&gt;</a></li>
   <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">&gt;&gt;</a></li>

 </ul>
</div>
<!-- 分頁結(jié)束 -->

HTML方法分析： 

1、

<li class="{{classRenderer(index)}}">

classRenderer()方法實現(xiàn)了當(dāng)點擊頁面索引是，點擊頁面獲得選中效果

2、

<a v-on:click="btnClick(index)" >{{index}}</a>

btnClick()方法，實現(xiàn)了點擊頁面索引，跳轉(zhuǎn)到相應(yīng)頁面

showPre showTail

showPre控制跳轉(zhuǎn)到第一頁與跳轉(zhuǎn)到前一頁的按鈕的顯示與消除

showTail控制跳轉(zhuǎn)到最后一頁與跳轉(zhuǎn)到后一頁的按鈕的顯示與消除

cur

記錄當(dāng)前頁序號

jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)

實現(xiàn)按鈕跳轉(zhuǎn)功能

JS：

 module.exports = {
    data: function () {
      return {
        cur:1,
        showTail:true,
        showMorePre: false,
        showMoreTail: false,       

      }
    },
    methods:{
    jumpFirst:function(data){
        var $this = this;
        data = 1;
        $this.cur = data;
        if (data == 1 )
        {
          $this.$set("showPre", false);
        }else
        {
          $this.$set("showPre", true);
        }
        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1},
          success: function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        $this.$set("showTail", true);
        return data;
      },
      minus:function(data){
        var $this = this;
        data--;
        $this.cur = data;
        $this.$set("showTail", true);
        if(data == 1){
          $this.$set("showPre", false);

        }else{
          $this.$set("showPre", true);
        }

        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        return data;
      },
      plus: function(data){
        var $this = this;
        data++;
        $this.cur = data;
        $this.$set("showPre", true);
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        $this.$am.ajax({
          url:/* 這里寫上你自己請求數(shù)據(jù)的路徑 */,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        return data;
      },
      classRenderer:function(index){
        var $this = this;
        var cur = $this.cur;
        if(index != cur){
          return 'crt';
        }
        return '';
      },
      btnClick:function(data){
        var $this = this;
        if(data == 1){
          $this.$set("showPre", false);

        }else{
          $this.$set("showPre", true);
        }
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        if (data != $this.cur)
        {
          $this.cur = data;
          $this.$am.ajax({
            url:window.$ApiConf.api_order_detail_list,
            type:'GET',
            data:{start: 1 + $this.limit * (data-1) },
            success:function(data){
              console.log(data);
              $this.$set("records", data.record.records);
              $this.$set("start", data.record.query.start);
              $this.$set("total", data.record.query.total);
              $this.$set("limit", data.record.query.limit);
            }
          })
        }
      },
      jumpTail:function(data){
        var $this = this;
        data = $this.pageNo;
        $this.cur = data;
        if (data == $this.pageNo)
        {
          $this.$set("showTail", false);
        }else
        {
          $this.$set("showTail", true);
        }
        $this.$am.ajax({
          url:window.$ApiConf.api_order_detail_list,
          type:'GET',
          data:{start: 1 + $this.limit * (data-1) },
          success:function(data){
            console.log(data);
            $this.$set("records", data.record.records);
            $this.$set("start", data.record.query.start);
            $this.$set("total", data.record.query.total);
            $this.$set("limit", data.record.query.limit);
          }
        })
        $this.$set("showPre", true);
        return data;
      },
     computed: {
      //*********************分頁開始******************************//
      indexs: function(){
        var $this = this;
        var ar = [];

        if ($this.cur > 3)
        {
          ar.push($this.cur - 3);
          ar.push($this.cur - 2);
          ar.push($this.cur - 1);

        }else
        {
          for (var i = 1; i < $this.cur; i++)
          {
            ar.push(i);
          }
        }
        if ($this.cur != $this.pageNo)
        {
          ar.push($this.cur);
        }

        if ( $this.cur < ( $this.pageNo - 3 ) )
        {
          ar.push($this.cur + 1);
          ar.push($this.cur + 2);
          ar.push($this.cur + 3);
          if ( $this.cur < ( $this.pageNo - 4 ) )
          {
            $this.$set("showMoreTail", true);
          }
        }else
        {
          $this.$set("showMoreTail", false);
          for (var i = ($this.cur + 1); i < $this.pageNo; i++)
          {
            ar.push(i);
          }
        }
        return ar;
      }
      //*********************分頁結(jié)束******************************//
    }
}

JS功能分析：indexs用于記錄一共有多少頁面

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue?ant?design?封裝彈窗表單的使用

    vue?ant?design?封裝彈窗表單的使用

    這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • 用Vue-cli搭建的項目中引入css報錯的原因分析

    用Vue-cli搭建的項目中引入css報錯的原因分析

    本篇文章主要介紹了用Vue-cli搭建的項目中引入css報錯的原因分析，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • 詳解vue項目中使用vuedraggable

    詳解vue項目中使用vuedraggable

    這篇文章主要介紹了vue項目中使用vuedraggable,本文給大家介紹了錯誤問題分析及解決方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-05-05
  • vue打包并部署到nginx上的實現(xiàn)示例

    vue打包并部署到nginx上的實現(xiàn)示例

    本文主要介紹了vue打包并部署到nginx上的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-01-01
  • vue中使用go()和back()兩種返回上一頁的區(qū)別說明

    vue中使用go()和back()兩種返回上一頁的區(qū)別說明

    這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • vue實現(xiàn)頁面自適應(yīng)的常用4種方法

    vue實現(xiàn)頁面自適應(yīng)的常用4種方法

    前端頁面自適應(yīng)有很多方法可以實現(xiàn),本文小編將為大家詳細介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-10-10
  • Vue基于Element-ui實現(xiàn)表格彈窗組件

    Vue基于Element-ui實現(xiàn)表格彈窗組件

    這篇文章主要為大家詳細介紹了Vue基于Element-ui實現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue.js實現(xiàn)帶日期星期的數(shù)字時鐘功能示例

    vue.js實現(xiàn)帶日期星期的數(shù)字時鐘功能示例

    這篇文章主要介紹了vue.js實現(xiàn)帶日期星期的數(shù)字時鐘功能,涉及vue.js基于定時器的日期時間運算與數(shù)值操作相關(guān)使用技巧,需要的朋友可以參考下
    2018-08-08
  • 詳解Vue中AXIOS的封裝

    詳解Vue中AXIOS的封裝

    這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-01-01
  • Vue 組件注冊實例詳解

    Vue 組件注冊實例詳解

    這篇文章主要介紹了Vue 組件注冊,結(jié)合實例形式較為詳細的分析了vue.js組件的常見分類、注冊方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2019-02-02

最新評論