精华内容
下载资源
问答
  • 今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能,感兴趣的朋友跟随小编一起看看吧
  • 美化的vue分页组件

    2018-05-23 17:27:26
    vue分页组件,html页面双击可直接运行。具有首页,尾页,下一页,上一次的效果,也有跳转页面的效果,可以设置一页显示多少条数,显示总共包换多少条数
  • 本文为大家讲解了Vue分页器实现原理,供大家参考,具体内容如下 网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧...
  • 使用vue编写的分页器组件,可设置初始页码,支持输入页码跳转
  • 本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: ()>上一页 <span v-show=current_page>5 class=jump @click=jumpPage(1)>1 <span class=ellipsis v-show=efo
  • Vue分页组件.vue

    2019-06-22 09:56:34
    (原创)这是一个功能比较完善的vue分页组件,包含基本的数据统计,页面跳转,修改每页显示条数,当前页居中显示等,有兴趣的可以直接拿来用。
  • A vue pagination component 一个vue分页组件
  • Vue分页插件

    2019-01-08 08:43:09
    Vue分页插件,直接放到HTML页面即可使用。不需要做多余的修改
  • vue-pagination 简单的vue分页组件 参考: $ git clone https://github.com/BookHill/vue-pagination.git && cd vue-pagination $ open index.html
  • 主要为大家详细介绍了一个可复用的vue分页组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue分页器组件编写方法,可设置初始当前页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue分页效果与购物车功能,本文图文实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue横屏分页加载 <template > <!-- 5.钢化膜 --> <div class="steelfilm"> <div class="steelfilm-top"> <div class="title"> <img src="@/assets/img/nl-member-privilege/...

    vue 分页 加载 vue横屏分页加载
    关键词:横着分页,左右分页,横屏分页,左右滑动分页

    b站视频地址:https://b23.tv/sEYwH5

    切记一定要把public/index.html 里面的body设置margin、padding 为0,不然可能会出问题

    
    <template>
      <div class="hello">
        <div class="list" id="tablist" @scroll="listScroll">
          <div
            class="item"
            v-for="(item, i) in datas"
            :key="i"
            :class="i % 2 == 0 ? 'red' : 'skyblue'"
          >
            {{ item }}
          </div>
          <div v-if="loading" class="loading">loading...</div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props: {
        msg: String,
      },
      data() {
        return {
          flag: true, // 开关
          loading: false, // loading加载
          datas: [1, 2, 3, 4, 5, 6], // 列表数据
        };
      },
      methods: {
        listScroll() {
          const scrollLeft = document.getElementById("tablist").scrollLeft;
          console.log("卷去宽度", scrollLeft);
          const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
          console.log("屏幕宽度", clientWidth);
          const tablist = document.getElementById("tablist").scrollWidth;
          console.log("列表宽度", tablist);
          console.log("-----------");
          if (tablist - clientWidth === scrollLeft && this.flag) {
            // 列表宽度-屏幕宽度 = 卷曲宽度  且  开关是打开的状态
            console.log("滑不动了");
            this.pageFn(); // 模拟 请求数据
          }
        },
        pageFn() {
          console.log("去分页请求**********");
          this.flag = false; // 开关 关闭
          this.loading = true; // loading 打开
          const that = this;
    
          // 模拟延迟请求
          setTimeout(() => {
            that.reqFn(); // 接口请求数据
          }, 1500);
        },
        reqFn() {
    
          const num = this.datas.length + 1; // 模拟新数据
          this.datas.push(num); // 新数据赋值
          this.flag = true; // 开关 打开
          this.loading = false; // loading 关闭
        },
      },
    };
    </script>
    
    
    <style scoped>
    .list {
      width: 100vw;
      height: 100px;
      overflow-x: scroll;
      white-space: nowrap;
    }
    .item {
      display: inline-block;
      width: 100px;
      height: 100px;
      box-sizing: content-box;
      line-height: 100px;
    }
    .red {
      background-color: red;
    }
    .skyblue {
      background-color: skyblue;
    }
    .loading {
      width: 80px;
      height: 100px;
      line-height: 100px;
      background: rgba(0, 0, 255, 0.664);
      display: inline-block;
    }
    </style>
    
    
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    /* h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    } */
    </style>
    
    
    展开全文
  • Vue实现简单分页

    2020-11-29 21:01:17
    后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了。 分页器的样式是bootstrap风格的,是...
  • vue-ads-pagination vue广告分页vue js分页组件。 在左侧,您可以找到有关所显示项目的一些信息。 在右侧的vue-ads-pagination中,Vue广告的分页vue js的分页组件。 在左侧,您可以找到有关所显示项目的一些信息...
  • vue、带省略分页

    2021-01-08 08:49:39
    效果图: 下一页: 不符合省略条件: html: 上一页 {{item}} 下一页 js: export default{ data(){ return{ list: [1,2,3,4,5,6,7,8,9,10,11], // 原始数组 lists: [1,2,3,4,5,6... if (this.list.len
  • vue 分页

    2020-04-28 20:07:00
    分页效果实现 思路: 1.每页显示的数量 2.当前页数 3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

    分页效果实现

    在这里插入图片描述
    思路:
    1.每页显示的数量
    2.当前页数
    3,总页数 , 总页数放在computed中计算 放在页面 splice截取数组元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>分页</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .pagination {
                margin: 20px 0;
            }
            .pagination a {
                padding: 5px 15px;
                border: 1px solid yellowgreen;
                text-decoration: none;
                margin: 5px;
            }
            /* 点按钮变色 这里只是提前写好样式 如果为true在会变色 */
            .pagination a.active {
               background : #3ba9ff;
               color: white;
            }
        </style> 
    
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="user in newUser":key="user.id">
                    {{user.name}}
                </li>        
            </ul>
                
            <!--         这里绑定总页数                  父组件传过来参数 复用件接收后判断如果为true执行css样式  --> 
            <p-pagination :pages=showUsers @click-pag="fn" :page = 'uPage'> </p-pagination> 
                             
        </div>
        <script>
            Vue.component("p-pagination",{
                template: `
                            <div class="pagination">    
                                <a href="javascript:;" @click='deduction'>上一页</a>  
    
                                <a href="javascript:;" v-for="pag in pages" @click="goto(pag)"                         
                                :class="{active: pag === page}"
                                >{{pag}}</a>
    
                                <a href="javascript:;" @click='score'>下一页</a>   
                            </div>                                           
                          `,
                props:['pages','page'],//接收参数 
                methods: {
                    goto(pag){            //点击按钮给父组件传参  这里的参数也可以直接使用pag
                        this.$emit("click-pag",pag);
                        // console.log(this.pages);
                        console.log(this.page)        
                    },
                    // 上一页
                    deduction(){
                        if(this.page - 1 >0){             
                            this.$emit("click-pag",this.page-1);
                         }else{
                            this.page = 1
                         }                      
                    },  
                    // 下一页
                    score(){  //若果是最后一页 
                        if(this.page >= this.pages ){    
                            this.page = this.pages            
                        }else{
                            this.$emit("click-pag",this.page+1);  
                        }   
                    },
                }
            });
            let app = new Vue({
                el:"#app",
                data:{
                    users:[
                        {id:1,name:'小王'},
                        {id:2,name:'小红'},
                        {id:3,name:'小明'},
                        {id:4,name:'小丽'},
                        {id:5,name:'小东'},
                        {id:6,name:'小花'},
                        {id:7,name:'小李'},  
                                       
                    ],
                    uPage:1, //当前页
                    perPage:2, //每页显示多少条
                    
                },
                computed: {
                    // 获取总页数 
                    showUsers:{  
                        get(){
                            return Math.ceil(this.users.length / this.perPage); 
                        }
                    },
                    newUser:{ //渲染到页面
                        get(){ // 分割数据
                            return JSON.parse(JSON.stringify(this.users)).splice((this.uPage-1)*this.perPage , this.perPage)
                        }
                    },
                },
    
                methods: {
                    fn(n){
                        // console.log(n)
                        this.uPage = n;  //接收到 子组件传过来的数据 修改data的显示
                    },
             
                 },             
            });
        </script>
    </body>
    </html>
    
    展开全文
  • 本篇文章主要介绍了基于vue实现分页/翻页组件paginator示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 分页添加序号

    2021-08-09 15:58:52
    条件查询绑定每次都是从第一页开始,不然就有跳转页数出错:

    也可以直接在序号标签那里直接添加排序方法:

     

    条件查询绑定每次都是从第一页开始,不然就有跳转页数出错: 

    展开全文
  • vue分页功能实现

    千次阅读 2020-10-09 18:50:08
    今天有人问我怎么用vue实现分页功能,我开始觉得这不是后端的事吗?怎么我们前端也要干了,而且现在怎么多UI库,比如Element-ui,我觉得这是个很好的前端UI库啊。不过既然有人问了,我就写写吧。 这是我的HTML代码 ...
    	今天有人问我怎么用vue实现分页功能,我开始觉得这不是后端的事吗?怎么我们前端也要干了,而且现在怎么多UI库,比如Element-ui,我觉得这是个很好的前端UI库啊。不过既然有人问了,我就写写吧。
    

    这是我的HTML代码

    <template>
      <ul>
        <!--上一页按钮-->
        <li><button class="el-icon-arrow-left" @click="getPageGo(-1)" :disabled="isActive"></button></li>
        <!--页码数按钮-->
        <li v-for="(item, index) in total" :key="index"><button @click="getPage(index)":class="index==queryInfo.pagenum-1 ? 'active':''">{{index+1}}</button></li>
        <!--下一页按钮-->
        <li><button class="el-icon-arrow-right" :disabled="isEnd" @click="getPageGo(1)"></button></li>
    
      </ul>
    </template>
    

    css样式是这样的:

    ul{
      height: 50px;
    }
      li{
        list-style-type: none;
        font-size: 10px;
        float: left;
        width: 40px;
      }
      .active{
        color: #fff;
        background-color: #2959df;
      }
    
    	具体效果图为这样:
    

    在这里插入图片描述 下面就是我的JS代码了,我设置当页码数为一时,上一页按钮被禁用,页数达到最后一页是,下一页按钮被禁用。具体代码如下所示:

    <script>
      //封装axios函数
      import {request} from "../../request";
    
      export default {
        name: "page",
        data(){
          return {
            //页面渲染数据
            cateList:[],
            total:0,
            //前端请求参数
            queryInfo: {
              query: '3',
              //访问第几页的页码数
              pagenum: 1,
              //页面展示的数据条数
              pagesize: 5
            }
          }
        },
        mounted() {
          let queryInfo = this.queryInfo
          this.getPageList(queryInfo)
        },
        methods:{
          //点击页码数按钮进行页面跳转
          getPage(index){
            this.queryInfo.pagenum = index+1
            let queryInfo = this.queryInfo
            this.getPageList(queryInfo)
          },
          //根据请求数据与后台交互
          getPageList(queryInfo){
            console.log(queryInfo.pagenum)
            request({url:'categories',params:queryInfo,method:'get'}).then(res=>{
              this.cateList = res.data
              this.total = res.data.total / this.queryInfo.pagesize
              console.log(res)
            }).catch(error=>{
              console.log(error)
            })
          },
          //点击上一页和下一页
          getPageGo(index){
            this.queryInfo.pagenum = this.queryInfo.pagenum + index
            let queryInfo = this.queryInfo
            this.getPageList(queryInfo)
          }
        },
        computed:{
          //当页码数到第一页时,上一页按钮禁用
          isActive(){
            if(this.queryInfo.pagenum > 1){
              return  false
            }else {
              return  true
            }
          },
          //当页码数到最后一页时,下一页按钮禁用
          isEnd(){
            if(this.queryInfo.pagenum === Math.ceil(this.total)){
              return  true
            }else {
              return  false
            }
          }
        }
      }
    
    
    展开全文
  • VUE_vue分页添加省略号

    2021-03-04 13:20:52
    data: { }, computed:{ //使用计算属性返回 pages(){ let start = 16;... //省略号的添加是分页大于10的时候 if(start <=5){ //当前页码小于等于5 return [1,2,3,4,5,6,'...',end] //[1,2,3
  • Vue 分页

    2019-03-28 15:37:40
    vue 分页 预览图: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 分页- 菜鸟教程(runoob.com)</title> <style> ul,li {margin:0;...
  • ant design of vue分页 资料:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-pagination v-if="testData != undefined && testData.length > 0" show-quick-jumper :...
  •   分页显示数据对项目开发中尤为重要,同时能提升用户体验,下面的前端css、js是我引用这篇文章的《使用Vue开发一个分页插件》,我在这个的基础上结合了后端稍微完善了一下,修改了disable的样式,在里面加了...
  • Vue分页导航

    2020-12-11 11:25:02
    Vue分页导航原文链接:https://www.cnblogs.com/vivaxiaonan/p/9987985.html 这里我用的是脚手架,粘Viva_nan大佬的代码封装了一个.vue组件。 实现效果如下: 封装组件 newCom.vue 代码: <template> &...
  • vue分页问题

    2020-07-04 09:41:20
    记录一次vue里面无法分页的问题 原因是@onPageChange写成@onpageChange
  • Django+vue 分页展示

    2020-03-24 20:26:08
    这里提供两种分页方法 一种是手写分页,不常用,但是明白一下分页的逻辑实现 第二种是用heyui提供的组件.很多功能都给封装好了,用起来也比较美观. 手写分页 后端接口 class GoodList(APIView): def get(self, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,096
精华内容 8,838
关键字:

vue分页

vue 订阅