Scroll view specifies the starting position of the scrolling element

scroll-into-view attribute , Value of a child element id, Cannot start with a number , Set which direction to scroll , In which direction to scroll to the element .
Use scenario 1 ： View data before the current date ( demand ： It is the current date when initializing , Then slide from right to left )

  <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}} month </view>
    </view>
  </scroll-view>

When data is initialized , To the last item The element sets a id by left, And then set scroll-into-view The value of the property is left that will do
Be careful ： You should load the list data before setting scroll-into-view The value of the property
Use scenario 2 ：scroll-view Combined calendar component , By default, slide right from the current date , Calendar choose which date ,scroll-view Just slide from which date , The optional date is one month after the current date .
Processing data ：

  data: {
    
    dateList:[],
    timeList:[],
    showCalender: false,
    date: "",
    minDate:'',
    maxDate:'',
    scrollIntoView:'',
  },

 //  Get the current date 
  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
    //  Gets the current date plus 30 Days after , Limit the calendar to post 30 God 
    var date1 = new Date();
    var date2 = new Date(date1);
    //  Set a day of the month 
    date2.setDate(date1.getDate() + 30);
    let dateLater = date2.getFullYear() + "/" + (date2.getMonth() + 1) + "/" + date2.getDate()
    //  Minimum and maximum optional dates in the calendar 
    this.setData({
    minDate:new Date(time).getTime(),maxDate:new Date(dateLater).getTime()})
    //  Get the current date plus the date after a day 
    let dateList = [],timeList = [],weekList = []
    for(let i = 0;i <= 30;i++) {
    
      dateList[i] = new Date(date1)
      //  List the required data 
      dateList[i].setDate(date1.getDate() + i)
      //  Request the complete date data required by the interface 
      timeList[i] = dateList[i].getFullYear() + "/" + (dateList[i].getMonth() + 1)  + "/" + dateList[i].getDate()
      //  Get the day of the week 
      weekList[i] = dateList[i].getDay()
    }
    dateList = dateList.map(item => {
    
      return item.getDate()
    })
    weekList = weekList.map(item => {
    
      if(item === 0) {
    
        return ' Sunday '
      } else if(item == 1) {
    
        return ' Monday '
      } else if(item == 2) {
    
        return ' Tuesday '
      } else if(item == 3) {
    
        return ' Wednesday '
      } else if(item == 4) {
    
        return' Thursday '
      } else if(item == 5) {
    
        return ' Friday '
      } else if(item == 6) {
    
        return ' Saturday '
      }
    })
    dateList = dateList.map(item => {
    
      return {
    date:item}
    })
    if(index) {
    
    	 //  Selected the date in the calendar , Set... In the corresponding sliding list id
      dateList[index].background = '#00bcd4'
      dateList[index].color = '#fff'
      dateList[index].id = 'target'
    } else {
    
    	 //  No calendar selected , The default setting is to slide the first data in the list 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
        }
      })
    })
    //  to scroll-view Set up 
    this.setData({
    dateList,timeList,scrollIntoView:'target'})
  },

The calendar

<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' />

Slide list

<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>

Select date

  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) {
     
      //  The date in the selected calendar is equal to the date in the sliding list 
      //  Re render the data in the sliding list every time you select a calendar 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})
  },