[js] 第288天用js封装一个前端分页的库，说说你的思路 #1834

haizhilin2013 · 2020-01-28T20:39:06Z

第288天用js封装一个前端分页的库，说说你的思路

poyoho · 2021-02-08T13:30:05Z

使用hash路由实现分页
好处就是不用刷新页面，来刷新内容。

 <body>
  <a href="#pageA">pageA</a>
  <a href="#pageB">pageB</a>
  <div class="a">
    hello world
  </div>
  <div class="b">
    你好
  </div>
<script>
const pageA = document.querySelector('.a')
const pageB = document.querySelector('.b')
pageA.setAttribute('style', 'display: none')
pageB.setAttribute('style', 'display: none')

window.addEventListener('load', () => {
  const hash = window.location.hash.slice(1)
  if (!hash) {
    window.location.hash = '/'
  }
})

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1)
  switch (hash) {
  case 'pageA':
    pageA.setAttribute('style', 'display: block')
    pageB.setAttribute('style', 'display: none')
    break
  case 'pageB':
    pageA.setAttribute('style', 'display: none')
    pageB.setAttribute('style', 'display: block')
    break
  default:
    pageA.setAttribute('style', 'display: none')
    pageB.setAttribute('style', 'display: block')
    break
  }
})
</script>

xiaoqiangz · 2022-08-31T07:16:48Z

const pagination = (function(param) {
function prev() {}
function next() {}
function first() {}
function last() {}
function jump() {}
return {
prev,
next,
first,
last,
jump
}
}(data))
pagination.prev()
pagination.next()

haizhilin2013 added the js JavaScript label Jan 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[js] 第288天用js封装一个前端分页的库，说说你的思路 #1834

[js] 第288天用js封装一个前端分页的库，说说你的思路 #1834

haizhilin2013 commented Jan 28, 2020

poyoho commented Feb 8, 2021

xiaoqiangz commented Aug 31, 2022

[js] 第288天 用js封装一个前端分页的库，说说你的思路 #1834

[js] 第288天 用js封装一个前端分页的库，说说你的思路 #1834

Comments

haizhilin2013 commented Jan 28, 2020

poyoho commented Feb 8, 2021

xiaoqiangz commented Aug 31, 2022

[js] 第288天用js封装一个前端分页的库，说说你的思路 #1834

[js] 第288天用js封装一个前端分页的库，说说你的思路 #1834