vue 手动挂载组件手动销毁组件_javascript原生手动分页组件

上班第二天，好心烦，因为昨天情人节没情人吧~~~

朋友圈都在虐狗，不刷了，老娘玩知乎去。

我不是天使：javascript原生自定义轮播图组件zhuanlan.zhihu.com

我不是天使：javascript原生瀑布流+图片懒加载组件zhuanlan.zhihu.com

实现功能：

1.一个页面可以多个分页组件
2.自定义总条数，当前页码，页码条数，分隔距离
3.页数选择后回调ajax函数
4.增加快速翻页，即一次性跳转5页的按钮操作

分页预览图：

实例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>javascript原生手动分页组件</title><style>/** * { margin:0;padding: 0;}会导致每个标签一开始就初始化，耗性能不适用 **/body, div, ul, ol, li, p, img, a, span{ margin:0;padding:0;}#pagenation { text-align: center;margin: 20px;}#pagenation [class$=_pager]{ user-select: none;list-style: none;display: inline-block;vertical-align: top;font-size: 0;padding: 0;margin: 0;}#pagenation button, #pagenation li {display: inline-block;vertical-align: top;font-size: 13px;box-sizing: border-box;text-align: center;cursor: pointer;padding: 0 4px;height: 28px;line-height: 28px;border: none;margin: 0 5px;background-color: #f4f4f5;color: #606266;min-width: 30px;border-radius: 2px;}#pagenation button:disabled { color: #c0c4cc;cursor: not-allowed;}#pagenation li:hover { color: #409EFF;}#pagenation .number.active { background-color: #409EFF;color: #fff;cursor: default;}#pagenation li.btn-quicknext, #pagenation li.btn-quickprev { font-weight: bold;line-height: 20px;}#pagenation li.btn-quicknext.active, #pagenation li.btn-quickprev.active { font-size: 12px;letter-spacing: -2px;line-height: 26px;}</style></head><body><div id="pagenation"></div><button id="test">change-size-test</button></body><script type="text/javascript">/*** 分页组件* @params obj 配置参数* @author hmt*/function Pagenation(obj) {this.wrap = obj.wrap; //容器this.page = obj.page || 1; //默认初始页this.size = obj.size || 10; //默认页面固定条数this.total = obj.total || 0; //默认总条数this.pages = Math.ceil(this.total / this.size); //默认总页数this.callback = obj.callback; //默认回调函数this.quickPages = 5; //默认快速翻页的页数this.interval = obj.interval ? (obj.interval < 3 ? obj.interval : 4) : 4; //默认间隔的数字是4+1=5个this.init(); //初始化}Pagenation.prototype = {constructor: Pagenation, //构造函数指向原函数init: function() { //创建dom结构this.wrap.innerHTML = ''; //渲染元素前先清空之前的所有元素this.wrap.appendChild(this.prevBtn()); //添加上一页按钮if (this.pages > 0) {this.wrap.appendChild(this.pageNum()); //添加页数按钮}this.wrap.appendChild(this.nextBtn()); //添加下一页按钮this.switchPage(); //绑定按钮事件},changeSize: function (s) { //设置新的页码显示条数this.size = s || 10;this.pages = Math.ceil(this.total / this.size);this.init();},changeTotal: function (t) { //设置新的总条数this.total = t || 0;this.pages = Math.ceil(this.total / this.size);this.init();},switchPage: function() { //绑定按钮事件var _this = this; //声明变量指向当前构造函数let numbers = this.wrap.querySelectorAll('.number');for (let i = 0, len = numbers.length; i < len; i++) {numbers[i].onclick = function () { //数字按钮点击事件if (_this.page != this.innerText) {console.log(_this.page, this.innerText)_this.page = Number(this.innerText);_this.init();_this.callback(_this.page); //按钮事件回调函数}};}this.wrap.querySelector('.btn-prev').onclick = function() { //上一页按钮点击事件_this.page = --_this.page;_this.init();_this.callback(_this.page); //按钮事件回调函数};this.wrap.querySelector('.btn-next').onclick = function() { //下一页按钮点击事件_this.page = ++_this.page;_this.init();_this.callback(_this.page); //按钮事件回调函数};let quickprev = this.wrap.querySelector('.btn-quickprev')if (quickprev) {quickprev.onclick = function() { //快速向上翻多页按钮点击事件_this.page = _this.page - _this.quickPages < 0 ? 1 : _this.page - _this.quickPages;_this.init();_this.callback(_this.page); //按钮事件回调函数};quickprev.onmouseenter = function(e) { //快速向上翻多页按钮鼠标移入事件e.target.classList.add('active');e.target.innerText = '<<';};quickprev.onmouseleave = function(e) { //快速向上翻多页按钮鼠标移出事件e.target.classList.remove('active');e.target.innerText = '...';};}let quicknext = this.wrap.querySelector('.btn-quicknext')if (quicknext) {quicknext.onclick = function() { //快速向下翻多页按钮点击事件_this.page = _this.page + _this.quickPages > _this.pageT ? _this.pageT : _this.page + _this.quickPages;_this.init();_this.callback(_this.page); //按钮事件回调函数};quicknext.onmouseenter = function(e) { //快速向下翻多页按钮鼠标移入事件e.target.classList.add('active');e.target.innerText = '>>';};quicknext.onmouseleave = function(e) { //快速向下翻多页按钮鼠标移出事件e.target.classList.remove('active');e.target.innerText = '...';};}},prevBtn: function() { //添加上一页按钮let btnprev = document.createElement('button');btnprev.setAttribute('class', 'btn-prev');btnprev.setAttribute('type', 'button');btnprev.innerText = '<';if (this.page === 1 || this.pages <= 0) {btnprev.setAttribute('disabled', true);} else {btnprev.removeAttribute('disabled');}return btnprev;},nextBtn: function() { //添加下一页按钮let btnnext = document.createElement('button');btnnext.setAttribute('class', 'btn-next');btnnext.setAttribute('type', 'button');btnnext.innerText = '>';if (this.page === this.pages || this.pages <= 0) {btnnext.setAttribute('disabled', true);} else {btnnext.removeAttribute('disabled');}return btnnext;},pageNum: function() { //添加页数按钮let ol = document.createElement('ol'); //数字按钮区域容器ol.classList.add(this.wrap.id + '_pager');let currentPage = this.page;let resetPages = this.pages;let first = currentPage <= this.interval ? 1 : currentPage > (resetPages - this.interval) ? resetPages - (this.interval + 1) : currentPage - (this.interval - 1);first = first === 0 ? 1 : first;ol.appendChild(this.renderNum(1));if (first - 1 >= 1){ol.appendChild(this.renderButton('btn-quickprev'));}let last = first + this.interval + 2;for (let i = first + 1; i < last; i++) {if (i === resetPages - this.interval && last > resetPages) {ol.appendChild(this.renderNum(first));}if (i <= resetPages) {ol.appendChild(this.renderNum(i));}if (i === last -1 && resetPages - i > 1) {ol.appendChild(this.renderButton('btn-quicknext'));ol.appendChild(this.renderNum(resetPages));}}return ol;},renderNum: function(i) { //渲染数字按钮结构let number = document.createElement('li');number.classList.add('number');number.innerText = i;if (i === this.page) {number.classList.add('active');}return number;},renderButton: function(name) { //渲染翻页按钮结构let button = document.createElement('li');button.classList.add(name);button.innerText = '...';return button;}}</script><script type="text/javascript">var pagenation = new Pagenation({ //实例化组件wrap: document.getElementById('pagenation'), //容器page: 1, //当前页,默认初始为1 size: 1, //页面条数,默认为10callback: function(page) {  ajaxtest()}});function ajaxtest() {console.log('页码：', pagenation.page);pagenation.changeTotal(100);}ajaxtest()document.getElementById('test').onclick = function() {pagenation.changeSize(10)}</script>
</html>

vue 手动挂载组件手动销毁组件_javascript原生手动分页组件相关推荐

Angular4.0分页组件
自己分装的分页组件,可供学习使用 paging分页组件分页组件的实现原理 1.由父组件传入数据总量 2.分页组件返回当前显示页面,每页显示数量 3.父组件根据分页组件返回的两个值,控制数据的分页显示 ...
vue手动封装分页组件
单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率 1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)2. pageSize,每页显示多少 ...
vue vuex 挂载_Vue $mount()手动挂载
//$mount()手动挂载 // 1 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: //假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue ...
记录vue中component切换组件时销毁定时器问题
问题描述:有A.B两个子组件,通过component进行切换,子组件中有定时器,当切换组件时需要把定时器给注销掉. 1.通过VUE组件生命周期进行删除定时器 2.使用this.$once来监听定时器 ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）
说明:本总结来源于慕课网 @ustbhuangyi老师的课程<Vue.js2.5+cube-ui重构饿了么App>课程,本博客做了项目总结梳理便于回顾,需要学习的伙伴可以移步学习.与君共勉 ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
Vue 人资实战篇七员工管理上封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、
1.0 封装一个通用的工具栏目标:封装一个通用的工具栏供大家使用 1.1 通用工具栏的组件结构在后续的业务开发中,经常会用到一个类似下图的工具栏,作为公共组件,进行一下封装组件 src/comp ...

vue 手动挂载组件手动销毁组件_javascript原生手动分页组件

vue 手动挂载组件手动销毁组件_javascript原生手动分页组件相关推荐

最新文章

热门文章

vue 手动挂载组件 手动销毁组件_javascript原生手动分页组件

vue 手动挂载组件 手动销毁组件_javascript原生手动分页组件相关推荐

最新文章

热门文章

vue 手动挂载组件手动销毁组件_javascript原生手动分页组件

vue 手动挂载组件手动销毁组件_javascript原生手动分页组件相关推荐