vue封装分页组件

需求

前台页面，只显示上一页下一页，总页数和当前页在另外一个地方显示，所以只需要封装上一页下一页的功能。
上一页下一页为图片，悬浮后显示悬浮后的图片。

代码

utils - local-img.js

const allIcon = { 
    // 分页
    page_prev: require('@/assets/images/page_prev.png'),
    page_next: require('@/assets/images/page_next.png'),
    page_prev_hover: require('@/assets/images/page_prev_hover.png'), 
    page_next_hover: require('@/assets/images/page_next_hover.png'),
}
export default allIcon

components - pagination.js

使用

全局注册后使用

data

totalCounts: 0,
currentPage: 1,
totalPages: 1,

methods

// 分页
handlePage (num) {
    this.currentPage = num
    this.getInfoList()
},
// 列表
getInfoList () {
    const params = {
        pageNum: this.currentPage,
        pageSize: 4,
    }
    api.info.infoList(params).then(res => { // 请求接口
        if (res.status == 200) {                
            this.infoList = res.data.list
            this.totalCounts = res.data.total
            this.totalPages = res.data.pages                
        }
    })   
},

网站导航

网站导航