小程序开发单行日历可滑动
我们需要实现一个单行日历,可以无限滑动。由于是单行,通常只显示一天或几天,但可以左右滑动切换日期。
考虑到无限滑动,我们可能需要使用循环列表的方式,或者动态加载日期数据。
思路:
-
使用一个可以横向滑动的scroll-view,内部放置一个可以横向排列的日期列表。
-
日期列表需要能够循环滚动,即滑动到两端时能够无缝跳转。
-
另一种思路是使用swiper组件,但是swiper通常用于全屏滑动,且循环滑动的话,需要设置无限个slide,可能性能不佳。
这里我们采用scroll-view,并实现一个类似无限循环的机制。
步骤:
a. 定义日期数据:我们需要一个数组来存储当前显示的日期。
b. 初始化时,设置当前日期在中间位置,然后向两边扩展一定数量的日期,这样在滑动时就可以加载更多。
c. 监听滑动事件,当滑动到边缘时,动态添加新的日期到数组的前面或后面,并同时移除另一端的旧日期,同时调整scroll-view的滚动位置,实现无缝衔接。
但是注意:小程序scroll-view的滚动设置需要谨慎,因为频繁设置滚动位置可能会造成闪烁。
另一种更简单的思路:我们并不需要真正的无限日期,而是给一个足够大的范围(比如100年),然后在这个范围内滑动。这样就不需要动态加载,但初始加载量较大。
考虑到是单行日历,通常只显示一天或一周,我们可以每次只渲染一个屏幕宽度的日期,但通过滑动加载更多。
由于需求是无限滑动,我们可以采用动态加载的方式,但要注意性能。
我这里采用动态加载的方式,并实现循环列表的效果:
-
我们设置一个初始数组,包含当前日期以及前后各一定数量的日期(比如前后各100天,总共201天)。
-
设置scroll-view横向滚动,并设置滚动事件监听。
-
当滚动到左边缘时,我们往数组的前面添加更多日期,同时移除数组后面的日期,并通过设置scroll-view的滚动位置(加上新增的宽度)来保持视觉上的连续。
-
同样,当滚动到右边缘时,往数组后面添加日期,移除前面的日期,并调整滚动位置。
但是,小程序中scroll-view的滚动事件中动态改变内容并设置滚动位置,容易造成抖动,且性能可能不佳。
另一种方案:使用两个scroll-view,一个用于显示左边的日期,一个用于显示右边的日期,通过监听滚动动态切换。但这样复杂度较高。
考虑到简单性,我们可以采用一个足够大的数组(比如100年的日期),然后让用户滑动,这样就不需要动态加载。100年大约36500天,对于小程序来说,这样一个数组可能会很大,但我们可以只生成一个日期字符串的数组,并不存储复杂对象,这样36500个字符串数组所占用的内存大概在几MB,可能可以接受。
但是,如果我们要考虑农历、节假日等,那么计算量会很大,所以动态加载可能是更好的选择。
折中方案:我们动态生成日期,但每次只生成一个较大范围(比如一年),当滑动到边缘时,再加载另一年的数据。
由于需求是单行日历,通常只显示一天,所以我们可以每次只加载一个屏幕的日期,但为了无限滑动,我们采用循环列表的思想。
我决定采用动态加载的方式,并利用scroll-view的滚动事件来实现:
步骤:
-
初始数据:显示当前日期,以及前后各一定数量的日期(比如前后各30天,总共61天)。
-
设置scroll-view的滚动位置初始值为中间(第30天的位置)。
-
监听滚动事件,当滚动到左边缘附近时,加载更早的日期,同时移除最后面的日期,并调整滚动位置(使显示的内容不变);同样,滚动到右边缘时,加载更晚的日期,移除最前面的日期,并调整滚动位置。
具体实现:
首先,我们需要一个函数来生成指定日期前后n天的日期数组。
然后,在scroll-view中渲染日期数组。
监听scroll-view的滚动事件,记录滚动位置。我们需要知道scroll-view的内