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 = ["星期日","星期一" ...
随机推荐
- 样例1-http接口的waiting(TTFB)时间从5.5s优化为100ms
问题 :如何解决网页响应慢,waiting(TTFB)时间过长,接口返回耗时等问题? 首先需要了解什么是Waiting (TTFB) 时间?TTFB 是Time to First Byte 的缩写,指 ...
- linux查看mac地址
1. ip addr show (ip address show .ip addr ) 查看本机ip和额外的一些信息 2.ifconfig -a 其中 HWaddr 就是mac地址 3.cat /s ...
- ThinkPHP网站安全方案
一.ThinkPHP介绍 ThinkPHP是一款优秀的网站内容管理系统,因其功能强大,操作简单,拥有海量用户和其他CMS一样,安全漏洞也是其无法避免的问题.虽然官方不断发布补丁.升级版本,但安全问题依 ...
- Python gdal读取MODIS遥感影像并结合质量控制QC波段掩膜数据
本文介绍基于Python中GDAL模块,实现MODIS遥感影像数据的读取.计算,并基于质量控制QC波段进行图像掩膜的方法. 前期的文章Python GDAL读取栅格数据并基于质量评估波段QA对 ...
- Java并发小结01
Java并发小结01 主要参考自<实战Java高并发程序设计>. 需要知道的概念 - 同步与异步 - 并发与并行 - 临界区 - 阻塞与非阻塞 - 死锁.饥饿.活锁 同步与异步 同步:同步 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——15.用汇编向屏幕输出字符
学习操作系统原理最好的方法是自己写一个简单的操作系统. 在上一讲中我们介绍了屏幕显示的原理,本讲我们来实战一下. 一.向屏幕输出一个字符mbr4.asm mbr4.asm中的代码如下: ;将屏幕第一行 ...
- CentOS Docker安装、镜像加速
CentOS Docker安装 方法一:使用官方安装脚本自动安装 # 安装命令: curl -fsSL https://get.docker.com | bash -s docker --mirror ...
- 【转载】vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件,拿到标签本身($el)
原文地址:https://blog.csdn.net/qq_39953537/article/details/110437554 vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件, ...
- Activiti 7 启动流程实例
首先,考虑下面这样一个流程图 主要的流程定义如下: <process id="demo" name="demo" isExecutable="t ...
- Sping Security前后端分离两种方案
前言 本篇文章是基于Spring Security实现前后端分离登录认证及权限控制的实战,主要包括以下四方面内容: Spring Seciruty简单介绍: 通过Spring Seciruty实现的基 ...