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="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{minDate}}" max-date="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{maxDate}}" show="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ showCalender }}" color='rgba(0, 188, 212, 1)' show-title='{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{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})
},
到此这篇关于微信小程序scroll-view指定滚动元素起始位置怎么做的文章就介绍到这了,更多相关小程序scroll-view内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!