微信小程序scroll-view指定滚动元素起始位置怎么做
落雪小轩韩 人气:0scroll-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}) },
加载全部内容