swiper5切换页面数据动态加载

Posted linfblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper5切换页面数据动态加载相关的知识，希望对你有一定的参考价值。

如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。
如果有什么错误，请一定指出，以免误导大家、也误导我。

swiper官方网址：点击查看

线上demo：点击查看

核心方法，在当前Slide切换到另一个Slide时执行：

<script language="javascript"> 
var mySwiper = new Swiper(‘.swiper-container‘,{
  on:{
    slideChange: function(){
      alert(‘改变了，activeIndex为‘+this.activeIndex);
    },
  },
})
</script>

详见：https://www.swiper.com.cn/api/event/405.html

完整代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
  <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
</head>
 
<body>
  <div class="swiper-container temp">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        2
      </div>
      <div class="swiper-slide">
        3
      </div>
    </div>
  </div>
</body>
<script>
  var now_ActiveIndex = 2; //,//当前所在下标
  var tempSwiper = new Swiper(‘.swiper-container.temp‘, {
    initialSlide: 1,
    loop: true,
    speed: 400,
    on: {
      slideChange: function (swiper) { //当前Slide切换时执行(activeIndex发生改变)
        var pre_number = Number($(this.slides[now_ActiveIndex]).text()); //获取当前页数字
        if (now_ActiveIndex > this.activeIndex) { //如果当前数字大于索引,索引区间范围1~4
          if (now_ActiveIndex == 4 && this.activeIndex == 1) { //swiper回到第一页
            $(this.slides[this.activeIndex]).text(pre_number);
          } else { //上一个
            var act_number = pre_number - 1;
            $(this.slides[this.activeIndex]).text(act_number);
          }
        } else if (now_ActiveIndex < this.activeIndex) {
          if (now_ActiveIndex == 0 && this.activeIndex == 3) {
            $(this.slides[this.activeIndex]).text(pre_number);
          } else { //下一个
            var act_number = pre_number + 1;
            $(this.slides[this.activeIndex]).text(act_number);
          }
        }
        now_ActiveIndex = this.activeIndex;
      },
    },
  })
</script>
<style>
.temp{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.swiper-slide{
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height:200px;
  font-size: 30px;
}
</style>
 
</html>

如要模拟异步请求，可使用mySwiper.allowSlideNext，mySwiper.allowSlidePrev，mySwiper.allowTouchMove配合使用。

以上是关于swiper5切换页面数据动态加载的主要内容，如果未能解决你的问题，请参考以下文章

单页面应用和多页面应用的区别对比

spring框架中多数据源创建加载并且实现动态切换的配置实例代码

单页应用及多页应用

jQuery Mobile 如何通过ajax方式动态加载页面？

如何在切换片段时停止 AsyncTask？

Android ViewPager + 带有动态 ListViews 的片段