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 = ''
},
Vue选日期滚动条自动定位到选定的日期位置的更多相关文章
- vue 内容增加滚动条自动定位至底部
this.$nextTick(() => { document.body.scrollTop = document.body.scrollHeight; console.log(document ...
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- vue-gemini-scrollbar(vue组件-自定义滚动条)
vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560
- vue中关于滚动条的那点事
vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...
- OpenJudge计算概论-Tomorrow never knows【输入日期计算下一天的日期】
/*====================================================================== Tomorrow never knows? 总时间限制 ...
- js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时
js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...
- sql生成连续日期(年份、月份、日期)
此随笔主在分享日常可能用到的sql函数,用于生成连续日期(年份.月份.日期) 具体的看代码及效果吧! -- ============================================= ...
- js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内
/** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...
- js替换全部,js检查输入的日期是否是一个正确的日期格式
<script language="javascript"> var str = "我爱的人和爱我的人,我爱的人和爱我的人"; var newstr ...
- 通过javascript的日期对象来得到当前的日期,并输出--内置对象---JS
//通过javascript的日期对象来得到当前的日期,并输出. var mydate = new Date(); var week = ["星期日","星期一" ...
随机推荐
- 【故障公告】cc攻击又来了,雪上加霜的三月
非常非常抱歉!今天 21:20-22:10 左右,肆无忌惮的 cc 攻击又来了,蓄意攻击者很厉害,躲过阿里云云盾的黑洞机制,轻松击垮园子的博客站点,又给大家带来了很大的麻烦,请大家谅解! 今年3月是园 ...
- IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤
IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤 . @ 目录 IDEA: 如何导入项目模块 以及 将 Java程序打包 JAR 详细步骤 IDEA 导入项目模块 Modul ...
- 11.4 显示窗口(harib08d)11.5 小实验(hearib08e) 11.6 高速计数器(harib08f)
11.4 显示窗口(harib08d) 书P206 11.5 小实验(hearib08e) 书P208 11.6 高速计数器(harib08f) 书P209
- 【经验分享】RTC 技术系列之视频编解码
要了解什么是视频编解码,首先我们需要了解什么是视频. 视频归根结底是一系列连续的图像帧,当这些图像以一定速率播放时,人眼就会判断其是连续活动的,这样就构成了视频. 那为什么要进行视频编解码呢,因为视频 ...
- day10-SpringBoot的异常处理
SpringBoot异常处理 1.基本介绍 默认情况下,SpringBoot提供/error处理所有错误的映射,也就是说当出现错误时,SpringBoot底层会请求转发到/error这个映射路径所关联 ...
- 智能且集成的端到端移动应用程序安全解决方案——Quixxi简介
移动应用程序安全变得简单快捷 Quixxi 是一种智能且集成的端到端移动应用程序安全解决方案.这个强大的工具可供开发人员在几分钟内保护和监控任何移动应用程序. Quixxi Security 评估应用 ...
- 「刷起来」Go必看的进阶面试题详解
勤学如春起之苗,不见其增日有所长:辍学如磨刀之石,不见其损日有所亏. 本文的重点:逃逸分析.延迟语句.散列表.通道.接口. 1.逃逸分析 逃逸分析是Go语言中的一项重要优化技术,可以帮助程序减少内存分 ...
- 【CTF】日志 2019.7.13 pwn 堆溢出基础知识
十六进制两位表示一个字节 堆溢出 先上堆图: 堆的数据结构 一般情况下,物理相邻的两个空闲 chunk 会被合并为一个 chunk struct malloc_chunk { INTERNAL_SIZ ...
- [Linux/Java SE]查看JAR包内的类 | JAR 命令 | 反编译
1 查看JAR包内的类 另一个思路: 解压JAR包jar -xf <jarPath> 1-1 单JAR包 -t list table of contents for archive(列出存 ...
- 深度剖析Redis九种数据结构实现原理,建议收藏
1. Redis介绍 Redis 是一个高性能的键值存储系统,支持多种数据结构. 包含五种基本类型 String(字符串).Hash(哈希).List(列表).Set(集合).Zset(有序集合),和 ...