Swiper实现上拉刷新和下拉加载更多

最新推荐文章于 2021-11-18 14:41:54 发布

anzhoujie4762

最新推荐文章于 2021-11-18 14:41:54 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lujiang/p/9847828.html

版权

本文介绍了如何在Swiper组件中添加上拉刷新和下拉加载更多的功能，提供了HTML和JS的基本结构，并提醒需要引入相应的CSS和JS库。详细代码和资源可在GitHub的SwiperUpDown_demo项目中获取。

摘要由CSDN通过智能技术生成

简单粗暴的放码

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

HTML结构：

 1 <div class="a">标题</div>
 2 <div class="tab">
 3    <a class="active" href="javascript:;">tab1</a>
 4    <a href="javascript:;">tab2</a>
 5    <a href="javascript:;">tab3</a>
 6 </div>
 7 <div class="swiper-container">
 8    <div class="refreshtip">下拉可以刷新</div>
 9    <div class="swiper-wrapper w">
10       <div class="swiper-slide d">
11          <div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
12          <div class="swiper-container2">
13             <div class="swiper-wrapper">
14                <div class="swiper-slide list-group">
15                   <div class="list-group-item">列表</div>
16                   <div class="list-group-item">列表</div>
17                   <div class="list-group-item">列表</div>
18                   <div class="list-group-item">列表</div>
19                   <div class="list-group-item">列表</div>
20                   <div class="list-group-item">列表</div>
21                </div>
22                <div class="swiper-slide list-group">
23                   <div class="list-group-item">列表</div>
24                   <div class="