AngularJS-Ionic：创建一个可滑动的horizo​​natlview，它将更新垂直视图

Question

我想使用angularjs和ionic为Android和iOS创建UI。查看如下：

解释：在此视图中，我想要一个水平条（当前显示1到8个日期，但可以从月的第1天到月的最后一天可以刷卡）包含日期。该条带可左右滑动。每天都会有一些数据显示在垂直列表视图中。当用户在水平条带上向左或向右滑动时，垂直数据将会更新。垂直列表视图将仅显示水平条带中显示的日期数据。

我不确定我该怎么做。任何指针例如库/样本代码等将非常感激。

由于

Answer 1

i would recommend swiper , i used it before and i find it simple and easy to work with : http://idangero.us/swiper/ , http://idangero.us/swiper/get-started/

documentation : http://idangero.us/swiper/api/

Swiper is also a default slider component in Ionic Framework

quick overview :

you can configure it to display x slides at a time, and the one in the middle will always have the swiper-slide-active class, you have an event slideChange that's fired when the swiper-slide-active is changed, you can put in that whatever function you want ( maybe an ajax one to fetch the day's data ) it's just fired a bit too early so you need to wrap it in setTimeout of 1ms

i made a basic example according to you layout and here's a fiddle that you can play with and change it to your needs :

https://jsfiddle.net/o9u0qenk/15/ ( updated for the weeks ) https://jsfiddle.net/o9u0qenk/22/ ( updated for real time )

EDIT

to display the data in a range of 7 days, centeredSlides: true is removed so swiper-slide-active becomes the first slide on the left, so that's your startDate, add 6 to get the endDate

Edit 2

for tracking the days in real time, you can use the event sliderMove to detect whether the slider is moving and do some stuff while it does, and you can store the offsetLeft of each slide in an Array and loop through it when the user is swiping and comparing the values with the current offset of the swiper, then break when match not to continue through the loop

edited snippet :

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>

i hope this helps and good luck.

Final Expected outcome : https://jsfiddle.net/o9u0qenk/40/