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 = ["星期日","星期一" ...
随机推荐
- UI资源,可在几分钟内创建精美的设计
UI资源,可在几分钟内创建精美的设计 组件:https://headlessui.com 图标:https://icons8.com 插画:https://undraw.co/illustration ...
- 【AI 全栈 SOTA 综述 】这些你都不知道,怎么敢说会 AI?【语音识别原理 + 实战】
章目录 前言语音识别原理 信号处理,声学特征提取 识别字符,组成文本 声学模型 语言模型 词汇模型语音声学特征提取:MFCC和LogFBank算法的原理实战一 ASR语音识别模型 ...
- find和filter有什么区别
JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处. 在开发应用程序时,大多使用数组方法来获取特定的值列表并获取单个或多个匹配项. 在列出这两种方法的区别之前,我们先来一 ...
- 利用 Rainbond 云原生平台简化 Kubernetes 业务问题排查
Kubernetes 已经成为了云原生时代基础设施的事实标准,越来越多的应用系统在 Kubernetes 环境中运行.Kubernetes 已经依靠其强大的自动化运维能力解决了业务系统的大多数运行维护 ...
- Kali中python问题
Kali中python问题 1.查看python有哪些版本 update-alternatives --display python 2.如果没有,可以去/usr/bin查看kali自带哪些版本 查看 ...
- 聊聊Spring扩展点BeanPostProcessor和BeanFactoryPostProcessor
介绍 今天聊一聊spring中很重要的两个扩展点BeanPostProcessor和BeanFactoryPostProcessor,spring之所以如次强大,是因为它提供了丰富的功能给我们使用,但 ...
- 深入理解 python 虚拟机:字节码灵魂——Code obejct
深入理解 python 虚拟机:字节码灵魂--Code obejct 在本篇文章当中主要给大家深入介绍在 cpython 当中非常重要的一个数据结构 code object! 在上一篇文章 深入理解 ...
- DevOps, HybridOps and AIOps浅谈
DevOps, HybridOps and AIOps浅谈 DevOps的概念出现比较久了,很多的IT项目也都在实际的运用中.AIOps概念作为DevOps的升级版,也得到了很广大的关注,也出现了很多 ...
- Excel的读取保存案例
python进行excel处理 1. Excel读取 # 首先导入pandas工具包 import pandas as pd # 读取Excel df = pd.read_excel('./excel ...
- 【树莓派】Docker安装calibre-web搭建在线书城
一.下载docker镜像 sudo docker pull johngong/calibre-web 二.创建calibre-web镜像的映射目录,存放配置文件&书籍 mkdir /home/ ...