Vue选日期滚动条自动定位到选定的日期位置

html

这里的关键点就是   :id="'scroll'+index" 以及 :scroll-into-view="intoIndex"

<view class="week-day-item" v-for="(item,index) in weekList" :key="index"
     @click="queryBus(item)" :id="'scroll'+index"
     :class="defaultDate.includes(item.date) ? ['active-font'] : (choiceDate.includes(item.date) ? ['active-font'] : '') ">
     <view class="week-day">{{item.date}}</view>
     <view class="week-day">{{item.week}}</view>
</view>

 

methods

这里的函数思想就是循环你的日期list，只要选中日期在list有匹配，就把下标给存储到intoIndex，这样 :scroll-into-view 就可以获取到要定位的下标地址了

　　　　　　// scroll定位
            operaDate() {this.weekList.forEach((item, index) => {
                    if (item.date.includes(this.choiceDate)) {
                        this.scrollIndex = index
                    }
                })
                this.$nextTick(() => {
                    this.intoIndex = "scroll" + this.scrollIndex
                })
                this.intoIndex = ''
            },