swiper组件实现tab——内容切换、动态数据请求、加载

最新推荐文章于 2023-11-05 19:36:07 发布

ansheng02

最新推荐文章于 2023-11-05 19:36:07 发布

阅读量7.9k

点赞数 1

分类专栏： swiper 前端HTML效果文章标签： swiper 动态请求加载数据 swiper动态请求加载数据 tab切换动态请求数据

本文链接：https://blog.csdn.net/ansheng02/article/details/88924319

版权

前端HTML效果同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

swiper

3 篇文章 0 订阅

订阅专栏

swiper是一个很好用的插件，免费、开源，关于轮播、切换、分页、动画效果等等。官网上给的源码案例，嗯，很基础，太基础了，哈~幸好文档还算OK，如果实现更好的具有设计感的页面，还是很好的。

之前在网上看过一个淘宝案例的源码，通过滑动地球来变换商品，额…代码理解并不难，但有设计感。跑题了，这个之后再详细解读，今儿要说的是，使用swiper实现tab切换，并让每一个内容模块都可以动态请求加载数据。

数据请求后列表可以上拉下滑操作，实现导航吸顶，具体请移步：swiper组件实现tab——内容切换、动态数据请求、加载（续）——通过监测手指滑动实现导航吸顶

先把swiper官网放出来：https://www.swiper.com.cn/。

目前有Swiper4.x，相较于Swiper3.x和Swiper2.x这三个版本，具体比较看官网链接https://www.swiper.com.cn/about/us/。

或者以下截图：

Swiper4和Swiper3的主要区别

Swiper3和Swiper2的主要区别

swiper插件用来慢慢研究，大概使用到的时候取查文档也是可以的。我看网上大多是vue和swiper结合使用。由于本项目是bootstrap框架，所以，关于前端的框架和插件，我个人认为，找到适合的自己使用且被市场容纳的。今年年后的工作中，我开始注重一些编码思想上的修正，工作真的让我成长了很多。哎呀呀~~回来回来。先说今儿的标题实现。

先引进来两个文件：

<link href="/css/swiper.min.css" rel="stylesheet">

<script src="/js/swiper.min.js"></script>

思路：

①：两个div，第一个div.tab > ul > li * 5 > a ; 第二个div > div * 5；

②：实现tab切换，这个可以用jquery 或者 swiper 都可以，在我用的是Jquery；

△△△△：重点在第二个div上，swiper 滑动有一个默认的类名swiper-container，这个一定要有。使用这个插件需要初始化swiper-container。

由于每一个tab-content请求的数据都不一样，总不能每一个tab-content都写一个swiper请求，这样做除了请求连接和参数不一样，其他代码都一样，会造成代码冗余，不管多谁（含开发者、使用者）来说，很不友好。

jquery实现tab切换大家都可以做得来，具体说下tab-content数据请求。

①：一进页面首次加载数据，函数： function firstLoad(url,tabId,indexContent){} ，调用这个函数，需要传（数据请求地址，请求的canotent 的 id，tab导航对应的contentDiv）

②：在上拉加载数据时，监测手指滑动事件；传值当前页数；发送请求；

③：swiper有监测手指滑动的事件：touchEnd(event)，这是一个回调函数，触摸释放时执行，接受 touchend事件作为参数（释放即执行）。

④：在touchEnd函数中，需要获取两个高度：视图高度：_viewHeight；内容高度：_contentHeight；手指滑动的高度：mySwiper.translate

⑤：计算：用手指滑动的高度和视图与内容的高度差作比较

手指滑动的高度要 < 0 （这个是为了判断是上拉？还是下滑？）

mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0

⑥：用 if……else if …… else 做分别传值，并用ajax请求数据

⑦：当请求的数据长度 data.list.length <= 0 时，数据加载完成。

具体代码如下，我会隐匿掉接口调用。\

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="author" content="静">
  <meta name="copyright" content="静">
  <title>tab请求数据</title>

  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/swiper.min.css" rel="stylesheet">
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/swiper.min.js"></script>
<style type="text/css">
    html, body{height: 100%;font-family: "微软雅黑";}
    *{margin: 0;padding: 0;box-sizing: border-box;}
    a {color: #428bca;text-decoration: none;}
    a:hover,a:focus {color: #2a6496;text-decoration: underline;}
    a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
    
    .padd_40{overflow-x:hidden;}
    .a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
    .tab{display: flex;line-height: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
    .tab a{width: 33.333333%;background: #fff;text-align: center;}
    .tab .active{border-bottom: 1px #f50 solid; color: #f50;}
    .panel{margin: 0;}
      
    .refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
    .swiper-container{overflow: visible;overflow-x:hidden}
    .loadtip {display: block;text-align: center;color: #bcb2b2;border-top: 1px solid #ddd;position: fixed;bottom: 3%;background-color: #ffc16f;color: #fff;padding: 1%;border-radius: 16px;right: 4%;}
    .swiper-container, .w{height: calc(100vh - 50px);} 
    .swiper-slide{height: auto;}
    
    .text-center{text-align: center;}
    .list-group{padding-left: 0;margin-bottom: 20px;}
    .list-group-item{    position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
    .list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
    .list-group-item{height:200px;}
    .product{padding:2%;border-bottom: 1px dashed #ccc;}
    .swiper-wrapper{position: static;}
</style>
<script text/javascript>
    $(function(){
        //全部分类
        firstLoad("allClass","1","divOne");
        //农副特产
        firstLoad("AAAA-Datasrc","1","divTwo");
        //超市百货
        firstLoad("BBBB-Datasrc","1","divThree");
        //丽人美妆
        firstLoad("CCCC-Datasrc","1","divFour");
        //网红产品
        firstLoad("DDDD-Datasrc","1","divFive");
        //9.9专区
        firstLoad("EEEE-Datasrc","1","divSix");
        //首次加载数据
        function firstLoad(url,tabId,indexContent){
          $.ajax({
                      url: url,
                      type: "GET",
                      data: {
                        "pageNumber":1,
                        "pageSize":5,
                        "tabId":tabId
                      },
                      async:false, 
                      success: function(data) {
                        console.log(data)
                        if(data.list.length > 0){
                          for(var i = 0; i<data.list.length;i++){
                            $("."+indexContent).append(data.list[i].name  + data.list[i].productImage.source + data.list[i].name + data.list[i].price + data.list[i].maxCommission + data.list[i].hits);
                          }
                         $(".loadtip").html('上拉加载更多...');
                        }
                      }
                    })  
        }
        
    
        //第一个tab分页
        var pageNumOne = 2;
        //第二个tab分页
        var pageNumTwo = 2;
        //第三个tab分页
        var pageNumThree= 3;
        //第四个tab分页
        var pageNumFour= 4;
        //第五个tab分页
        var pageNumFive= 5;
        //第六个tab分页
        var pageNumSix= 6;
        var mySwiper = new Swiper('.swiper-container',{  //初始化swiper
        direction: 'vertical',  //纵向滑动
        scrollbar: '.swiper-scrollbar',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        onTouchEnd: function(swiper) {
          var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
                var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
                 // 上拉加载
                if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
                    // console.log("已经到达底部！");
                    $(".loadtip").html('正在加载...');
                    var pageNum = 0;
                    var tabId = 0;
                    //判断操作的div
                    var divClass = $(".list-group").eq(mySwiper2.activeIndex).attr("class");
                    if(divClass.indexOf("divOne") != -1){
                      //全部分类
                      pageNum = pageNumOne;
                      tabId = "1"
                    } else if(divClass.indexOf("divTwo") != -1){
                      //AAAA
                      pageNum = pageNumTwo;
                      tabId = "1"
                    } else if(divClass.indexOf("divThree") != -1){
                      //BBBB
                      pageNum = pageNumThree;
                      tabId = "1"
                    } else if(divClass.indexOf("divFour") != -1){
                      //CCCC
                      pageNum = pageNumFour;
                      tabId = "1"
                    }
                    else if(divClass.indexOf("divFive") != -1){
                      //DDDD
                      pageNum = pageNumFive;
                      tabId = "1"
                    }
                    else if(divClass.indexOf("divSix") != -1){
                      //EEEE
                      pageNum = pageNumSix;
                      tabId = "1"
                    }
                    //拼接数据
                    $.ajax({
                      url: "src-src-src-src-src-src",
                      type: "GET",
                      data: {
                        "pageNumber":pageNum,
                        "pageSize":8,  //每次请求的数据条数
                        "tabId":tabId
                      },
                      async:false, 
                      success: function(data) {
                        console.log(data)
                        if(data.list.length > 0){
                            //判断操作的div
                        var divClass = $(".list-group").eq(mySwiper2.activeIndex).attr("class");
                        if(divClass.indexOf("divOne") != -1){
                          //全部分类
                          pageNumOne += 1;
                        } else if(divClass.indexOf("divTwo") != -1){
                          //AAAA
                          pageNumTwo += 1;
                        } else if(divClass.indexOf("divThree") != -1){
                          //BBBB
                          pageNumThree += 1;
                        } else if(divClass.indexOf("divFour") != -1){
                          //CCCC
                          pageNumThree += 1;
                        } else if(divClass.indexOf("divFive") != -1){
                          //DDDD
                          pageNumThree += 1;
                        } else if(divClass.indexOf("divThree") != -1){
                          //EEEE
                          pageNumThree += 1;
                        } 
                          for(var i = 0; i<data.list.length;i++){
                            $(".list-group").eq(mySwiper2.activeIndex).append(data.list[i].name + data.list[i].productImage.source + data.list[i].name + data.list[i].price + data.list[i].maxCommission + data.list[i].hits);
                          }
                         $(".loadtip").html('上拉加载更多...');
                         mySwiper.update(); // 重新计算高度;
                        }else if(data.list.length <= 0){
                          $(".loadtip").html('没有更多啦！');
                          return false;
                        }
                      }
                    })  
                }
                return false;
        }
      });
      var mySwiper2 = new Swiper('.swiper-container2',{
        onTransitionEnd: function(swiper){
          $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
          $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
          mySwiper.update();
          $('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
        }
      });
      
      //tab切换 
      $('.tab a').click(function(){
        $(this).addClass('active').siblings('a').removeClass('active');
        mySwiper2.slideTo($(this).index(), 500, false)
        $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
        $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
        mySwiper.update();
      });
    });
</script>
</head>
<body class="padd_40">
    <main>
        <div class="tab">
          <a class="active" href="javascript:;">全部</a>
          <a href="javascript:;">AAAA</a>
          <a href="javascript:;">BBBB</a>
          <a href="javascript:;">CCCC</a>
          <a href="javascript:;">DDDDD</a>
          <a href="javascript:;">EEEE</a>
        </div>
        <div class="swiper-container" style="background-color: #fff;">
          <div class="swiper-wrapper w">
            <div class="swiper-slide d">
              <div class="swiper-container2">
                <div class="swiper-wrapper">
                  <div class="swiper-slide list-group  divOne">
                  </div>
                  <div class="swiper-slide list-group divTwo">
                  </div>
                  <div class="swiper-slide list-group divThree">
                  </div>
                  <div class="swiper-slide list-group divFour">
                  </div>
                  <div class="swiper-slide list-group divFive">
                  </div>
                  <div class="swiper-slide list-group divSix">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="loadtip">上拉加载更多</div>
          <div class="swiper-scrollbar"></div>
        </div>
    </main>
</body>
</html>

ansheng02

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
swiper组件实现tab——内容切换、动态数据请求、加载

swiper是一个很好用的插件，免费、开源，关于轮播、切换、分页、动画效果等等。官网上给的源码案例，嗯，很基础，太基础了，哈~幸好文档还算OK，如果实现更好的具有设计感的页面，还是很好的。之前在网上看过一个淘宝案例的源码，通过滑动地球来变换商品，额…代码理解并不难，但有设计感。跑题了，这个之后再详细解读，今儿要说的是，使用swiper实现tab切换，并让每一个内容模块都可以动态请求加载...
复制链接

扫一扫

专栏目录