guairena的博客

效果具体思路同 小程序scroll-view滚动组件，左边导航栏与右边内容联动效果实现不同的是上面的文章为单选，这里是选择范围可以选择两个月份。思路主要是在选择月的时候通过判断一个数组，如果数组里有两个值，则再次点击会清空数组重新选择第一个push进数组；如果数组里有一个值，点击的时候会push进第二个；可以允许选择的两个值相等。具体代码<!--pages/monthOfficeModule/monSectCalendar/monSectCalendar.wxml-->..

效果左侧为年份，右侧为该年对应的月份，点击左侧2020年，则右侧的2020年灰色区域的标题滚动到最顶部；滚动右侧区域当2020年滚动到顶部时，左侧选中2020年高亮显示。思路使用scroll-view组件分别包裹左侧及右侧内容，点击左侧年份时，给其动态设置样式并让右侧区域滚动到指定位置；通过给右侧的scroll-view标签绑定scroll-into-view属性，值为某子元素id，根据id滚动到该元素。给右侧每一年份区域设置id值，左侧点击事件携带该点击项的id值，并将该值动态绑定给scroll.

需求：  小程序需要实现日历的需求，可以单选、可以选择区间、节假日和周六颜色高亮、返回本月。具体如图，类似猫眼app的日历选择。思路：参考市场上含有日历的小程序及app，确定是自己实现还是使用组件，骨朵使用的是Pikaday。确定使用Vant Weapp组件库中日历。需要对源码进行一些修改，首先样式的修改、包括顶部周日到周六、节假日及周六日日期的颜色、返回本月按钮的添加及样式。前后实现了三种展示日历的不同方式4-1. 第一种，根据官方示例引入日历组件，平铺整个页面。选择日期后会跳转返回列表