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

Posted 2023-05-09

【中文标题】AngularJS-Ionic：创建一个可滑动的水平视图，它将更新垂直视图

【英文标题】：AngularJS-Ionic : create a swipeable horizonatlview which will update vertical view

【发布时间】：2018-08-23 17:08:32

【问题描述】：

我想使用 angularjs 和 ionic 创建适用于 android 和 ios 的 UI。视图如下：

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

我不确定我该怎么做。任何指针，例如库/示例代码等将不胜感激。

谢谢

【问题讨论】：

查看hammer.js的滑动检测

你可以试试这个idangero.us/swiper/get-started

【参考方案1】：

我会推荐swiper，我以前用过它，我觉得它简单易用：http://idangero.us/swiper/，http://idangero.us/swiper/get-started/

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

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

快速概览：

您可以将其配置为一次显示x 幻灯片，中间的幻灯片将始终具有swiper-slide-active 类，您有一个事件slideChange 在swiper-slide-active 更改时触发，您可以放入您想要的任何功能（可能是一个 ajax 来获取当天的数据）它只是触发得太早了，所以您需要将它包装在 setTimeout 的 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 进行比较时循环遍历它，然后在匹配时break 不继续通过loop

已编辑 sn-p：

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/

【讨论】：

您的示例仅显示一个选定日期的数据，但在我的情况下，不会有任何选定日期，但将显示 7 个日期，并且对应于我想在垂直滚动视图中显示数据的那些日期.

哦，误会了，我刚刚根据您的评论编辑了我的答案。

快到了。你可以使用这个（codebeautify.org/online-json-editor/cb92ca7f）json并实时更新垂直视图中的数据吗？

我不确定我是否理解您实时的意思，比如当用户滚动时？

当用户滚动时是的