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

Vue选日期滚动条自动定位到选定的日期位置的更多相关文章

  1. vue 内容增加滚动条自动定位至底部

    this.$nextTick(() => { document.body.scrollTop = document.body.scrollHeight; console.log(document ...

  2. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  3. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  4. vue中关于滚动条的那点事

    vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...

  5. OpenJudge计算概论-Tomorrow never knows【输入日期计算下一天的日期】

    /*====================================================================== Tomorrow never knows? 总时间限制 ...

  6. js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时

    js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...

  7. sql生成连续日期(年份、月份、日期)

    此随笔主在分享日常可能用到的sql函数,用于生成连续日期(年份.月份.日期) 具体的看代码及效果吧! -- ============================================= ...

  8. js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内

    /** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...

  9. js替换全部,js检查输入的日期是否是一个正确的日期格式

    <script language="javascript"> var str = "我爱的人和爱我的人,我爱的人和爱我的人"; var newstr ...

  10. 通过javascript的日期对象来得到当前的日期,并输出--内置对象---JS

    //通过javascript的日期对象来得到当前的日期,并输出. var mydate = new Date(); var week = ["星期日","星期一" ...

随机推荐

  1. 网络安全(中职组)-B模块:Web安全渗透测试

    Web安全渗透测试任务环境说明: 服务器场景:PYsystem003(关闭链接)服务器操作系统:未知用户名:未知 密码:未知 1.    通过浏览器访问http://靶机服务器IP/1,对该页面进行渗 ...

  2. Android 音视频采集那些事

    音视频采集 在整个音视频处理的过程中,位于发送端的音视频采集工作无疑是整个音视频链路的开始.在 Android 或者 IOS 上都有相关的硬件设备--Camera 和麦克风作为输入源.本章我们来分析如 ...

  3. P4555 最长双回文串 解题报告

    看到回文串,于是就想到了马拉车. 马拉车可以帮我们求出每个 \(i\) 的最大扩展距离,容易得出,双回文串就是两个回文串拼一起.当然,两个回文串必须要相交,不然形不成一个字符串. 有的小可爱就会想直接 ...

  4. 用Java代码验证三门问题

    三门问题(Monty Hall problem)亦称为蒙提霍尔问题,出自美国的电视游戏节目Let's Make a Deal. 问题名字来自该节目的主持人蒙提·霍尔(Monty Hall).参赛者会看 ...

  5. 关于springboot使用mybatis查询出现空指针,以及debug出现All Elements all Null的解决方法

    数据库中命名方式是带有下划线 ,然后在实体类中使用的是驼峰命名法 ,那么就需要在application.yml文件中加上 自闭了,那么简单的问题,没了解过真是摸不着头脑

  6. keyclaok~keycloak存到cookie中的值和session_state

    keycloak存到cookie中的值 AUTH_SESSION_ID KEYCLOAK_IDENTITY KEYCLOAK_SESSION AUTH_SESSION_ID 用户的当前session_ ...

  7. 智能且集成的端到端移动应用程序安全解决方案——Quixxi简介

    移动应用程序安全变得简单快捷 Quixxi 是一种智能且集成的端到端移动应用程序安全解决方案.这个强大的工具可供开发人员在几分钟内保护和监控任何移动应用程序. Quixxi Security 评估应用 ...

  8. pandas之字符串操作

    Pandas 提供了一系列的字符串函数,因此能够很方便地对字符串进行处理.在本节,我们使用 Series 对象对常用的字符串函数进行讲解.常用的字符串处理函数如下表所示: 函数名称 函数功能和描述 l ...

  9. [Linux]常用命令之【nl/sed/awk/wc/xargs/perl】

    nl nl : 在linux系统中用来计算文件中行号. nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补 ...

  10. 教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023

    目录 1. 本篇适用范围与目的 1.1. 适用范围 1.2. 目的 2. 牛刀小试 - 先看到地球 2.1. 创建 Vue3 - TypeScript 工程并安装 cesium 2.2. 清理不必要的 ...