AngularJS-Ionic :创建一个可滑动的水平视图，它将更新垂直视图

Question

我想使用angularjs和离子型为Android和iOS创建一个UI。意见如下：

​

解释：在这个视图中，我希望有一个水平条(当前显示1到8个日期，但它可以从月份的第1天到月份的最后一天滑动)，其中包含日期。这条条子可以左右滑动。每天都会有一些数据显示在垂直列表视图中。当用户在水平条上左右滑动时，垂直数据将更新。垂直列表视图将只显示水平条中显示的日期数据。

我不知道我怎么能做到。任何指针，如库/样例代码等，都将不胜感激。

谢谢

Answer 1

我推荐swiper，我以前使用过它，我发现它简单易用：http://idangero.us/swiper/，http://idangero.us/swiper/get-started/

文档：http://idangero.us/swiper/api/

Swiper也是Ionic框架中的默认滑块组件

快速概述：

您可以将它配置为一次显示x幻灯片，中间的一个总是有swiper-slide-active类，您有一个事件slideChange，当swiper-slide-active被更改时，您可以添加任何您想要的函数(可能是一个ajax函数来获取当天的数据)--它启动得太早了，所以您需要将它封装在setTimeout of 1ms中

我做了一个基本的例子，根据你的布局，这里有一个小提琴，你可以玩，并改变它，以您的需要：

https://jsfiddle.net/o9u0qenk/15/ (为周更新) https://jsfiddle.net/o9u0qenk/22/ (实时更新)

编辑

为了在7天内显示数据，centeredSlides: true被移除，所以swiper-slide-active成为左边的第一个幻灯片，所以这是您的startDate，添加6以获得endDate

编辑2

为了实时跟踪天数，您可以使用事件sliderMove来检测滑块是否在移动，并在滑块移动时执行一些操作，并且可以将每张幻灯片的offsetLeft存储在Array中，并在用户滑动并与当前的滑动器的offset进行比较时循环遍历该幻灯片的值，然后在匹配不通过loop继续运行时进行break。

编辑的片段：

​

var content = document.getElementById('content');
	
var currenOffset; // swiper's offset
var childOffset; // slide's offset
	
var startIndex; 
var endIndex;
	
var slides = document.getElementsByClassName('swiper-slide');
var slidesOffsets = [];
  
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 7,
  spaceBetween: 10,      
  on: {
    init: function () {
      setTimeout(function(){
        var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;
        var endDay = parseInt(startDay) + 6 ;            
        content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';
      }, 1);
    }
  }
});
	
swiper.on('slideChange', function () {
  setTimeout(function(){
    var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;
    var endDay = parseInt(startDay) + 6 ;
    content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';
  }, 1);
});


for(var i =0; i < slides.length; i++){
  slidesOffsets.push((slides[i].offsetLeft * -1) + 10);
}
	
swiper.on('sliderMove', function(e){
  currentOffset = this.translate;
		
  for(var i=0; i<slides.length; i++){
    if( slidesOffsets[i] <= currentOffset){				
      startIndex = i ;
      break;
    }
  }
		
  endIndex = startIndex + 6;
  content.innerHTML = '<div> Showing data for days ' + startIndex + ' to ' + endIndex +  '</div>';		
});

html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 80px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#content{
  width: 100%;
	height: calc(100% - 80px);		
}
#content div{			
  margin: auto;
	text-align: center;
	padding-top: 50px;
	font-size: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
      <div class="swiper-slide">6</div>
      <div class="swiper-slide">7</div>
      <div class="swiper-slide">8</div>
      <div class="swiper-slide">9</div>
      <div class="swiper-slide">10</div>
      <div class="swiper-slide">11</div>
      <div class="swiper-slide">12</div>
      <div class="swiper-slide">13</div>
      <div class="swiper-slide">14</div>
      <div class="swiper-slide">15</div>
      <div class="swiper-slide">16</div>
      <div class="swiper-slide">17</div>
      <div class="swiper-slide">18</div>
      <div class="swiper-slide">19</div>
      <div class="swiper-slide">20</div>
      <div class="swiper-slide">21</div>
      <div class="swiper-slide">22</div>
      <div class="swiper-slide">23</div>
      <div class="swiper-slide">24</div>
      <div class="swiper-slide">25</div>
      <div class="swiper-slide">26</div>
      <div class="swiper-slide">27</div>
      <div class="swiper-slide">28</div>
      <div class="swiper-slide">29</div>
      <div class="swiper-slide">30</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
	
	<div id="content">

	</div>

​

希望这能帮上忙，祝你好运。

最终预期结果：https://jsfiddle.net/o9u0qenk/40/