swiper動態加載數據修改數據，loop模式循環

需求：加載頁面，請求所有的列表數據豎直顯示，超過5個，開始輪播；點擊按鈕，篩選數據，不足5個的話不輪播，如果超過則開始滾動；swiper 4.0*

swiper輪播

HTML

 <div class="project_list_wrap project_list_wrap2 swiper-container">
          <div class="swiper-wrapper">
          </div>
    </div>

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 += '<div class="swiper-slide project_item">' +
      '<div class="project_item_title_1 noWrap">' + listData[i].title_1 + '</div>' +
      '<div class="project_item_title_2 noWrap">' + listData[i].titel_2 + '</div>' +
      '<div class="project_item_source">' + listData[i].source + '</div>' +
      '<div class="project_item_date">' + listData[i].date + '</div>' + '</div>';
  };
  //如果數據條數少於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();
  })
}