上拉加载下拉刷新

上拉加载,做项目用了好多次,没有总结,这次跟大家分享一下.
使用的插件是iscroll-probe.js

/* css部分 */
        *{margin: 0; padding: 0;list-style: none; }
        html{ font-size: 62.5%; }
        header,footer{height: 3rem; font: 2rem/3rem "宋体";text-align: center;background-color: #ebc23d; }
        #content li{font: 1.8rem/2.4rem "宋体";border-bottom: 1px solid #c48561; }
       /* 添加滚动的标签要设置width、height和overflow:hidden */
        #wrapper{position: absolute;overflow: hidden;top: 3rem;bottom: 3rem;width: 100%; }
        footer{position: absolute;bottom: 0;width: 100%;}
        #pullDown,#pullUp{font: 3rem/4rem "宋体";text-align: center;color: #dd50b9; font-size: 2.2rem;display: none; }

iScroll
释放加载loading...
  • 列表项1
  • 列表项2
  • 列表项3
  • 列表项4
  • 列表项5
  • 列表项6
  • 列表项7
  • 列表项8
  • 列表项9
  • 列表项10
  • 列表项11
  • 列表项12
  • 列表项13
  • 列表项14
  • 列表项15
  • 列表项16
  • 列表项17
  • 列表项18
  • 列表项19
  • 列表项20
  • 列表项21
  • 列表项22
加载loading...
Footer

可以直接粘贴使用!

你可能感兴趣的:(上拉加载下拉刷新)