精华内容
下载资源
问答
  • vue分页功能
    2021-12-31 16:53:49

    vue页面下滑触底分页

    @vue



    提示:以下是本篇文章正文内容,下面案例可供参考

    一、使用步骤

    1.页面数据展示

    <div>
       <div class="interestsList clearfix" `v-for="(item,index) in hotList"` :key="index" v-if="hotList.length>0">.....<div>
       <Loading :isLoading="isLoading" :loadMoreOver="loadMoreOver" />
    </div>
    

    2.js逻辑代码

    代码如下(示例):

    export default {
    data () {
        return {
    currentPage: 1, // 当前页
    pageCount: 1, // 总页数
    isLoading: false, // 加载中
    loadMoreOver: false, // 加载更多
    hotList:[]//展示数据
         }
      },
      method:{
        //滚动方法
    			handleScroll() {
    				var scrollTop =
    				document.documentElement.scrollTop || document.body.scrollTop
    					if (
    					!this.loadMoreOver &&
    					scrollTop + window.innerHeight >= document.body.clientHeight//根据屏幕高度来进行翻页,若没超           过屏幕高度则不翻页
    					) {
    					this.isLoading = true //开启动画
    					this.hotDetailsList()//翻页立即调用方法加载剩余数据,并增加页数
    					}
    			},
     调取接口传入分页参数,调取一次页数增加一页传给接口,每次调取只获得一页数据,concat到展示数组中,获得分页效果
    hotDetailsList(){
    		 	   hotDetailsListAjax(this.currentPage)
    				 	.then(res=>{
    				 		if(res.status==200){
    					 		 let receiveArray = res.data.items;
    					 		 this.pageCount = res.data._meta.pageCount //获取总页数
    						if (this.currentPage<=this.pageCount) {
    							this.currentPage++
    							//当前页小于或等于总页数时,当前页+1,数组追加
    							this.hotList = this.hotList.concat(receiveArray)
    							this.isLoading = false //关闭加载动画
    							this.$store.commit('changeLoadingStatus', false) //接口请求成功,加载动画消失
    						} else {
    							//当前页大于总页数时,提示已经全部加载完成
    							//    console.log('已经全部加载完成')
    							this.isLoading = false //关闭加载动画
    							this.loadMoreOver = true //显示加载
    						}
    						 }
    					})
    					.catch(err=>{
    												this.isLoading = false //关闭加载动画
                            this.$store.commit('changeLoadingStatus', false) //接口请求失败,加载动画消失
    
    					})
    		 },
    },
     mounted(){
            	 this.hotDetailsList();
              window.addEventListener('scroll', this.handleScroll) //监听滚动事件,每次滑动便调取滚动方法从而调动分页接口
             }
    
    
    
     destroyed() {
       window.removeEventListener('scroll', this.handleScroll)//销毁监听事件
     },
    }
    

    该处使用的url网络请求的数据。


    另写js文件写分页接口

    export function hotDetailsListAjax(currentPage) {
      return axios({
        method: 'GET',
        url: `/v1/feeds/hot-topic-items-by-tag-id/${id}`,
        data: filterEmptyKey({}),
        params: filterEmptyKey({page: currentPage})
    
      })
    }
    
    更多相关内容
  • 文章目录vue分页功能实现一、直接上代码二、需要注意的事项 vue分页功能实现 一、直接上代码 // 列表结构 // 重点:data="pageList" <el-table :data="pageList" :cell-style="fileNameStyle" tooltip-effect=...

    vue分页功能实现

    一、直接上代码

    // 列表结构
    // 重点:data="pageList"
    <el-table
      :data="pageList"
      :cell-style="fileNameStyle"
      tooltip-effect="dark"
      style="width: 100%"
    >
    </el-table>
    
    // 分页结构
    // handleSizeChange: 每页的条数切换方法
    // current_change: 当前是第几页方法
    // *重点:currentChangePage 分页方法(js代码里)
    <el-pagination
        @size-change="handleSizeChange"
    	@current-change="current_change"
    	:current-page="currentPage1"
    	:page-size="pageSize"
    	layout="prev, pager, next"
    	:total="total">
    </el-pagination>
    
    data() {
        return {
          tableListData: [], // 列表数据
          pageList: [], // 分页列表数据
          pageSize: 1, // 每页多少条
          currentPage1: 1, // 当前页
          total: 0, // 总数据条数
        }
    },
    
    methods: {
        // 根据项目id查询全部列表数据
        async getListAll () {
          const { data: res } = await this.$http.post('/model/listModelFile', {
            id: this.parentId
          })
          if (res.code !== 0) {
            return this.$message.error('获取列表数据失败!')
          }
          // console.log(res)
          this.tableListData = res.data.list
          this.currentChangePage(this.tableListData, 1)
    
          // this.pageSize = res.data.pageSize
          this.currentPage = res.data.currPage
          this.total = res.data.totalCount
    
        },
            
        // 每页条数切换
        handleSizeChange (pageSize) {
          this.pageSize = pageSize
          this.current_change(this.currentPage1)
        },
        // 当前是第几页
        current_change (currentPage) {
          console.log('当前页改变时', currentPage)
          this.currentPage1 = currentPage
          this.currentChangePage(this.tableListData, currentPage)
        },
        // 分页方法(重点)
        currentChangePage (list, currentPage) {
          console.log('list', list)
          let from = (currentPage - 1) * this.pageSize
          let to = currentPage * this.pageSize
          this.pageList = []
          for (; from < to; from++) {
            if (list[from]) {
              this.pageList.push(list[from])
            }
          }
        },
    }
    

    二、需要注意的事项

    1. 带分页后,列表的数据源是分页处理后的数据源,不是所有的数据;
    展开全文
  • 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分页功能.rar

    2019-07-17 10:23:46
    vue2.0实现多种分页功能,采用bootstrap框架,让您快速实现vue分页
  • vue分页功能Bug

    2022-08-01 10:33:19
    vue分页功能

    今天分页功能报错了,报错是这样报错的

    看代码

    <pagination v-show="adminTotal>0"
                      :total="adminTotal"
                      :page.sync="adminParams.pageNum"
                      :limit.sync="adminParams.pageSize"
                      @pagination="getAdminListPage" />

    后台返回的数据是这样式的

     

    开始直接调用的列表数据所以报错了

    新代码

    把后台返回的数据赋值

    // 分页
        getAdminListPage (e) {
          console.log(e)
          this.adminParams.pageNum = e.page
          this.adminParams.pageSize = e.limit
          this.getAdminList(this.siteId)
        },

     

     

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

    2022-08-01 09:55:47
    Vue实现分页
  • 学习vue+element做用户条件分页查询遇到的坑! ps:(table :data 直接使用 list整个对象赋值,纯前端分页功能实现)!
  • 为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给...
  • vue 分页功能的实现

    2021-09-04 11:22:35
    效果图 定义data数据
  • 今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果: 点击查看效果 整体思路 我们先看一下使用到的文件的...
  • 一、安装和引入 import { Pagination } from 'element-ui' 二、使用 1.html <el-pagination v-if="true" class="pagination" background layout="prev, pager, next" :pageSize="pageSize... :total=
  • 前端vue实现分页功能

    千次阅读 2021-01-27 09:30:07
    前端Vue实现分页功能 我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页。 1、 首先,在data中定义以下变量: data() { return { list: null, listLoading: true, ...
  • vue前端实现分页功能

    2022-07-21 09:00:56
    后端返回大量数据 前端实现简单分页功能
  • 本篇文章主要介绍了利用VUE框架,实现列表分页功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 主要为大家详细介绍了基于vue.js实现分页查询功能vue.js实现数据库分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 订单列表 <div class=search-box><input type=text name= id= class=order-search-input placeholder=关键词 v-model='search...
  • vue分页的设置

    2022-06-29 17:05:50
    1,在vue.config.js中添加如下代码 2,在.eslint.js中注释掉重新启动项目,大功告成
  • 分页组件 首先来创建项目: ...可以从底部出发,从最小的逻辑开始,从做这个需要考虑到什么想起,一步一步来,做好局部的功能,这个功能做好了,才去做另一个功能或者页面哦~ 分页组件我们需要的字段有哪些?
  • 1: template里 引入组件 <el-table ref='multipleTable' :data="tableData">...2: 设置分页用的参数 data(){ return{ tableData:[], multipleSelectionAll:[],//所有选中的数据包含跨页数据...
  • 使用vue实现分页

    千次阅读 2021-08-17 16:50:08
    效果如上图,第一页显示5行数据 HTML代码... } mapper也提供给大家 select * from admin_info limit #{param1},#{param2} 浏览器访问,就OK了,实现前端用户点击分页盒子后端进行物理分页啦!且前端用了VUE能够实时刷新

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,013
精华内容 5,605
关键字:

vue分页功能

友情链接: 4.rar