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

合集 - Vue(17)

1.Vue跨域详解2023-05-162.Vue 打包后报 Uncaught SyntaxError: Unexpected token ‘＜‘2023-05-163.TypeError: Cannot read property 'upgrade' of undefined2023-04-23

4.Vue选日期滚动条自动定位到选定的日期位置2023-03-28

5.Vue根据时间戳制作倒计时15分钟2023-03-276.防抖节流utils2023-03-137.一些JS过滤方法2022-10-088.Vue全局公共服务类mixin2022-10-089.npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`2022-06-1610.vue一直处在2.9.6版本卸载不了升级不了解决方案2022-06-0811.Vue 全局避免按钮重复点击2022-05-2712.Vue2 去除定时器之常用三种方式及特殊方式2022-05-1613.Vue Element-ui 之 el-table自动滚动2022-05-1114.el-table自适应列宽2022-05-1315.vue工程内下载路由2021-08-0616.40% building 31/38 modules 7 active ...es\core-js\modules\es6.object.assign.jsBrowserslist: caniuse-lite is outdated.2021-08-1117.Vue监听系统是否为暗黑模式2023-12-14

收起

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 = ''
            },