小程序改变swiper的高度：小程序Swiper组件做日历 周历 左右滑动动态修改数据
小程序改变swiper的高度：小程序Swiper组件做日历 周历 左右滑动动态修改数据第一次右滑后，`index:1`，显示week3，`weeks = [[week2] [week3] [week4]]` 第二次右滑后，`index:2`，显示week4，`weeks = [[week5] [week3] [week4]]` 第三次右滑后，`index:0`，显示week5，`weeks = [[week5] [week6] [week4]]`左滑如是推出。根据方向，写出当swiper的current值为0 1 2时的具体处理代码，修改weeks 和index的值Swiper设置为循环播放 `circular="true"` （这是关键之一）初次渲染使用`weeks [0] index=0`假设：`weeks = [[week2] [week3] [week1]]`，其中week2是初始化时显示的，此时index:0，> 为什么weeks[2]是
使用Swiper做一个周日历功能，要求滑动swiper时，可以显示上一周/下一周的日期。
一开始设想的是使用二维数组存放3个周的日期，右滑时push接下来的周，然后shift第一项，左滑反之，试了几种方法，要么是日期不见了，要么就是判断左滑右滑失败了。
看到CSDN上的文章《小程序 - swiper滑动日历》受到了启发，继续尝试，总算成功了。
## 思路使用数组存放3个周的日期，`weeks = [[] [] []]`
Swiper设置为循环播放 `circular="true"` （这是关键之一）
初次渲染使用`weeks [0] index=0`
假设：`weeks = [[week2] [week3] [week1]]`，其中week2是初始化时显示的，此时index:0，
> 为什么weeks[2]是week1呢？因为swiper是循环的，那我们左滑时，week2的左边应该是week1，也就是放在weeks[2]的位置。所以一定从循环的角度来为数组赋值。
接下来判断方向（左滑/右滑）
根据方向，写出当swiper的current值为0 1 2时的具体处理代码，修改weeks 和index的值
第一次右滑后，`index:1`，显示week3，`weeks = [[week2] [week3] [week4]]`
第二次右滑后，`index:2`，显示week4，`weeks = [[week5] [week3] [week4]]`
第三次右滑后，`index:0`，显示week5，`weeks = [[week5] [week6] [week4]]`
左滑如是推出。
## 代码实现<!-- wxml -->
<swiper class="swiper" current="{{index}}" circular="true" bindchange="change">
<swiper-item class="swipe-days" wx:for="{{weeks}}" item-id="item{{index}}">
<view class="day {{d.date==currentDate ? 'selected':''}}" wx:for="{{item}}" wx:for-item="d" data-date="{{d.date}}" bindtap="tapDate">
{{d.day}}</view>
</swiper-item>
</swiper>
// JS
// 使用了dayjs日期库，方便直观
// 这里删除了我自己的一些取数据的代码，如果只需要做日历，应该还可以再优化一下。
const dayjs = require("./dayjs");
const db = wx.cloud.database();
const _ = db.command;
Page({
/**
* 页面的初始数据
*/
data: {
index: 0
weeks: []
currentDate: dayjs().format("YYYY-MM-DD")
today: dayjs().format("YYYY-MM-DD")
startDate: null
endDate: null
weekName: [
{ name: '日' cls: 'weekend' }
{ name: '一' cls: '' }
{ name: '二' cls: '' }
{ name: '三' cls: '' }
{ name: '四' cls: '' }
{ name: '五' cls: '' }
{ name: '六' cls: 'weekend' }
]
}
onLoad: function(options) {
this.init();
}
change(e) {
let { currentDate index weeks startDate endDate } = this.data
let current = e.detail.current
let aDate = current - index == -2 || current - index == 1 ? endDate : startDate
if (current == 0) {
weeks = [this.getWeek(0 aDate) this.getWeek(1 aDate) this.getWeek(-1 aDate)]
startDate = weeks[2][0].date
endDate = weeks[1][6].date
currentDate = weeks[0][0].date
}
if (current == 1) {
weeks = [this.getWeek(-1 aDate) this.getWeek(0 aDate) this.getWeek(1 aDate)]
startDate = weeks[0][0].date
endDate = weeks[2][6].date
currentDate = weeks[1][0].date
}
if (current == 2) {
weeks = [this.getWeek(1 aDate) this.getWeek(-1 aDate) this.getWeek(0 aDate)]
startDate = weeks[1][0].date
endDate = weeks[0][6].date
currentDate = weeks[2][0].date
}
this.setData({
weeks startDate endDate currentDate index: current
})
}
tapDate(e) {
let date = e.currentTarget.dataset.date
this.setData({
currentDate: date
})
}
init() {
// 构造一个数组[[] [] []]，里边放3个星期的数据 [0]放本周，[1]放下一周 [2]放上一周
let { weeks startDate endDate currentDate } = this.data
weeks = [this.getWeek(0 currentDate) this.getWeek(1 currentDate) this.getWeek(-1 currentDate)]
startDate = weeks[2][0].date
endDate = weeks[1][6].date
this.setData({
weeks startDate endDate
})
}
// direction 接收 0 1 -1三个值，分别代表，本周，下周，上周
getWeek(direction date) {
date = dayjs(date)
let firstDayOfWeek = date.subtract(date.day() "day");
let arr = []
for (let i = direction * 7; i < (1 direction) * 7; i ) {
let d = firstDayOfWeek.add(i "day")
arr.push({
date: d.format("YYYY-MM-DD")
day: d.format("DD")
})
}
return arr;
}
});
.swiper { height: 80rpx; margin-bottom:16rpx;}
.swipe-days{ display: flex; justify-content: space-around; }
.day { display: inline-flex;height: 80rpx; width: 80rpx; border-radius: 80rpx; justify-content: center; line-height: 80rpx;font-size:24rpx;}
.selected {background-image: linear-gradient(-45deg #3857e3 #567bfd);color: #fff;font-weight: bold }
