Swiper实现上拉刷新和下拉加载更多(学习笔记④)

简单粗暴的放码

一个简单的效果 分页器效果中加下拉刷新和上拉加载功能

HTML结构:

class="a">标题
class="swiper-container">
class="refreshtip">下拉可以刷新
class="swiper-wrapper w">
class="swiper-slide d">
class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新
class="swiper-container2">
class="swiper-wrapper">
class="swiper-slide list-group">
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="swiper-slide list-group">
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="swiper-slide list-group">
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="list-group-item">列表
class="loadtip">上拉加载更多
class="swiper-scrollbar">
JS结构:

注意:

需要引入css和js

rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
 
  


资源文件下载地址:https://github.com/SunnyYang222/SwiperUpDown_demo


你可能感兴趣的:(学习笔记)