scroll-into-view
属性,值为某子元素的id,不能以数字开头,设置哪个方向滚动,则在哪个方向上滚动到该元素。
使用场景一:查看当前日期之前的数据(需求:初始化时为当前日期,然后从右往左滑动)
<scroll-view enable-flex scroll-x class="scroll-x" scroll-into-view="{{scrollIntoView}}" style="height: 120rpx;width: 100%;">
<view id="{{item.id ? item.id : index}}" wx:for="{{monthList}}" wx:key="index" class="view_item" style="position: relative;">
<view wx:if="{{item.month == 1}}" style="position: absolute;top: -55rpx;left:40rpx;font-size: 24rpx;color:#a1a1a1;height: 60rpx;">{{item.year}}</view>
<view style="background-color: {{item.background ? item.background : '#f0f8fa'}};" class="view_item_time" bindtap="clickItem" data-item="{{index}}">{{item.month}}月</view>
</view>
</scroll-view>
初始化数据时,给最后一个item元素设置一个id为left,然后再设置scroll-into-view
属性的值为left即可
注意点:要先加载完列表数据再设置scroll-into-view
属性的值
使用场景二:scroll-view结合日历组件,默认从当前日期开始向右滑动,日历选择哪个日期,scroll-view就从哪个日期开始滑动,可选日期为当前日期后一个月。
处理数据:
data: {
dateList:[],
timeList:[],
showCalender: false,
date: "",
minDate:'',
maxDate:'',
scrollIntoView:'',
},
// 获取当前年月日
getCurrentDate(index) {
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
var date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate();
var time = year + '/' + month + '/' + date
// 获取当前日期加上30天后的日期,限制日历只能选择后30天
var date1 = new Date();
var date2 = new Date(date1);
// 设置一个月的某一天
date2.setDate(date1.getDate() + 30);
let dateLater = date2.getFullYear() + "/" + (date2.getMonth() + 1) + "/" + date2.getDate()
// 日历中的最小和最大可选日期
this.setData({minDate:new Date(time).getTime(),maxDate:new Date(dateLater).getTime()})
// 获取当前日期加上某天后的日期
let dateList = [],timeList = [],weekList = []
for(let i = 0;i <= 30;i++) {
dateList[i] = new Date(date1)
// 列表展示需要的数据
dateList[i].setDate(date1.getDate() + i)
// 请求接口需要的完整日期数据
timeList[i] = dateList[i].getFullYear() + "/" + (dateList[i].getMonth() + 1) + "/" + dateList[i].getDate()
// 获取星期几
weekList[i] = dateList[i].getDay()
}
dateList = dateList.map(item => {
return item.getDate()
})
weekList = weekList.map(item => {
if(item === 0) {
return '周日'
} else if(item == 1) {
return '周一'
} else if(item == 2) {
return '周二'
} else if(item == 3) {
return '周三'
} else if(item == 4) {
return'周四'
} else if(item == 5) {
return '周五'
} else if(item == 6) {
return '周六'
}
})
dateList = dateList.map(item => {
return {date:item}
})
if(index) {
// 选择了日历中的日期,设置对应滑动列表中的id
dateList[index].background = '#00bcd4'
dateList[index].color = '#fff'
dateList[index].id = 'target'
} else {
// 没有选择日历,默认设置滑动列表中第一条数据的id
dateList[0].background = '#00bcd4'
dateList[0].color = '#fff'
dateList[0].id = 'target'
}
dateList.map((item1,index1) => {
weekList.map((item2,index2) => {
if(index1 === index2) {
item1.week = item2
}
})
})
// 给scroll-view设置
this.setData({dateList,timeList,scrollIntoView:'target'})
},
日历
<van-calendar poppable row-height='50' min-date="{{minDate}}" max-date="{{maxDate}}" show="{{ showCalender }}" color='rgba(0, 188, 212, 1)' show-title='{{false}}' close-on-click-overlay show-confirm bind:confirm="chooseDate" bind:close='closeCalender' />
滑动列表
<scroll-view enable-flex scroll-x class="scroll-x" scroll-into-view="{{scrollIntoView}}">
<view id="{{item.id ? item.id : index}}" style="background-color: {{item.background ? item.background : '#fff'}};color: {{item.color ? item.color : '#000'}};" class="date-item" bindtap="clickDate" wx:for="{{dateList}}" wx:key="index" data-index="{{index}}">
<view class="item-week">{{item.week}}</view>
<view class="item-date">{{item.date}}</view>
</view>
</scroll-view>
选择日期
chooseDate(e) {
let timeStamp = new Date(Date.parse(e.detail))
let year = timeStamp.getFullYear()
let month = timeStamp.getMonth() + 1
let day = timeStamp.getDate()
let date = `${year}/${month}/${day}`
this.setData({
date,
showCalender: false
})
this.data.timeList.map((item,index) => {
if(item === date) {
// 选中日历中的日期与滑动列表中的日期相等
// 每选一次日历日期都重新渲染一下滑动列表中的数据
this.getCurrentDate(index)
setTimeout(() => { this.getCurrentDate(index)},500)
} else {
this.data.dateList[index].id = index
this.data.dateList[index].background = '#fff'
this.data.dateList[index].color = '#000'
}
})
this.setData({dateList:this.data.dateList})
},