swiper动态加载数据修改数据，loop模式循环

需求：加载页面，请求所有的列表数据竖直显示，超过5个，开始轮播；点击按钮，筛选数据，不足5个的话不轮播，如果超过则开始滚动；swiper 4.0*

swiper轮播

HTML

CSS

.project_list_wrap2 {
  height: 350px;
}

.project_list_wrap2.no_swiper {
  height: auto;
}

.no_swiper .swiper-wrapper {
  flex-direction: column;
}

.no_swiper .swiper-wrapper .project_item {
  height: 60px;
  margin-bottom: 10px;
}

JS

let listData1 = [{
  title_1: '江汉区老年人能力评估点位审批111',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}, {
  title_1: '江汉区老年人能力评估点位审批222',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}, {
  title_1: '江汉区老年人能力评估点位审批333',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}, {
  title_1: '江汉区老年人能力评估点位审批444',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}, {
  title_1: '江汉区老年人能力评估点位审批555',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}, {
  title_1: '江汉区老年人能力评估点位审批666',
  titel_2: '武汉市老年人能力评估',
  source: '2019年武汉市养老项目工作',
  date: '昨天 09:00 - 周三'
}];
let listData2 = [{
    title_1: '江汉区老年人能力评估点位审批aaaa',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批bbbb',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批cccc',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }
  /* , {
    title_1: '江汉区老年人能力评估点位审批dddd',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批eeee',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批ffff',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批gggg',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  }, {
    title_1: '江汉区老年人能力评估点位审批hhhh',
    titel_2: '武汉市老年人能力评估',
    source: '2019年武汉市养老项目工作',
    date: '昨天 09:00 - 周三'
  } */
];
//app全局属性
const app = {};
app.html = {};
app.html.str = '';
app.toggle = true;
app.swiper = null;
app.swiperViewLimitNum = 5; //轮播触发的个数
app.swiperContainerClass = '.project_list_wrap2 '
app.swiperWrapperClass = '.project_list_wrap2 .swiper-wrapper';
//初始化页面
function initPage() {
//加载数据
  beforeTodayListGetData(listData1);
//点击按钮，切换数据
  $('.toggleData').on('click', function () {
    // debugger;
    if (app.toggle) {
      beforeTodayListGetData(listData2);
      app.toggle = false;
    } else {
      beforeTodayListGetData(listData1);
      app.toggle = true;
    }
  })
}
//获取数据渲染页面
function beforeTodayListGetData(data) {
  const listData = data;
  let dataLen = listData.length; //数据的个数
  let dataListWrap = $(app.swiperWrapperClass);
  let containerWrap = $(app.swiperContainerClass);

  dataListWrap.empty(); //清空页面的slides
  app.html.str = '';

  for (let i = 0; i < listData.length; i++) {
    app.html.str += '
' +
      '
' + listData[i].title_1 + '
' +
      '
' + listData[i].titel_2 + '
' +
      '
' + listData[i].source + '
' +
      '
' + listData[i].date + '
' + '
';
  };
  //如果数据条数少于swiperViewLimitNum
  if (dataLen <= app.swiperViewLimitNum) {
    if (app.swiper) {
      app.swiper.destroy(true, true); //销毁swiper
      app.swiper = null;
    }
    /* 不是swiper的情况 */
    dataListWrap.append(app.html.str);
    containerWrap.addClass('no_swiper');
    $(app.swiperContainerClass).off('mouseover').off('mouseleave'); //解除事件绑定
  } else {
    containerWrap.removeClass('no_swiper'); //清除class类
    setTimeout(() => {//渲染页面需要时间
      if (app.swiper) {
        //数据满足swiperViewLimitNum，可以轮播
        app.swiper.update();
        app.swiper.appendSlide(app.html.str); //添加slide
      } else {
        dataListWrap.append(app.html.str);
        initSwiper()
      }
    }, 100);
  }
}


//初始化轮播
function initSwiper() {
  //配置项
  let options = {
    direction: "vertical",
    initialSlide: 0, //自动滚动
    autoplay: {
      delay: 2000
    },
    loop: true, //形成环路
    observer: true,
    slidesPerView: app.swiperViewLimitNum,//可以显示的slides个数
    spaceBetween: 10,//slides间隔
  }
  //初始化swiper
  app.swiper = new Swiper(app.swiperContainerClass, options);
  
  //绑定事件
  //鼠标移入暂停轮播
  $(app.swiperContainerClass).on('mouseover', function () { 
    app.swiper.autoplay.stop();
  })
   //鼠标移出开始轮播
  $(app.swiperContainerClass).on('mouseleave', function () {
    app.swiper.autoplay.start();
  })
}