javascript - 无限滚动+计算滚动了多少

标签 javascript html angularjs ionic-framework calendar

我正在开发一个 ionic 应用程序,最近在实现某些功能时遇到了一些麻烦。 首先,我使用的是 ionic 1,因此我使用的是 AngularJS 1。

我的目标是在 ionic 上创建一个日历。这看起来很经典,但大多数现有模板都显示一个月,您必须触摸一个按钮或向右滑动或进行下一个月的操作。对我来说,这似乎是一个非常糟糕的用户体验。

我想制作一个日历,允许某人从每个月的每一天动态和垂直显示(由于屏幕大小,只有两个 - 例如 - 同时显示)。

An Image For You

注意:不要介意颜色,它是为了附加功能。

在图片上,我可以向下滚动,当八月消失时,十月出现(抱歉图片上的法语月份名称)。

我查看了很多模板是如何在 Javascript 中完成日历的,最简单的方法似乎是将 html 动态生成为字符串(乍一看这对我来说似乎很脏,但在期待之后我发现它以某种方式优雅) .因此,尽管我只需要生成 7-8 个月的 html,以中间的 2 个月为中心,并在每次用户滚动时动态更改它。

我的大问题是:可以准确计算出用户使用 ionic-scroll 向下滚动的次数吗? 如果我知道他向下滚动了相当于两个月的距离,我就知道我必须在未来再计算两个月并丢弃那些太远的。

这个解决方案有意义吗?或者有人知道如何执行此操作吗?

很高兴听到对此的每条评论。如果需要任何进一步的信息,我会尽快回答。

最佳答案

似乎你可以用 https://ionicframework.com/docs/api/directive/collectionRepeat 来做到这一点.如果您为每个月设置正确的高度,这应该是开箱即用的。

<ion-content>
  <div collection-repeat="month in months"
    item-height="200px">
    //month template
  </div>
</ion-content>

关于javascript - 无限滚动+计算滚动了多少,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39616392/

相关文章:

html - 如何在 <pre> 标签内转义 < 和 >

c# - Http 处理程序不拦截 .html 和 .aspx

javascript - 在 AngularJS 中使用 ng-repeat 的多个表会卡住浏览器一段时间

javascript - 自定义 ios 键盘以显示数字键盘

javascript - 使用 jquery 时抑制 anchor 标记 <a> href

javascript - d3(幕后)-area.style.append 有效,而 area.style + area.append 无效。为什么?

javascript - 带有阿拉伯语语言环境的 moment.js 年/数字格式

javascript - 带有滚动条问题的多级下拉菜单

html - 使用横幅图片发布底部阴影

javascript - 与 sibling 一起做两个按钮的互斥复选框()