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 = ["星期日","星期一" ...
随机推荐
- 一篇文章带你快速入门学习RPA
大纲: 什么是RPA? RPA的应用领域有哪些? RPA机器人技术一般用于什么行业? RPA的市场需求是什么? RPA项目的实施过程? RPA的未来趋势怎么样? 什么是RPA? RPA 全称& ...
- Android笔记--文本显示
文本显示 设置文本内容 方式一: 在.xml文件中利用android:text属性设置文本 新创建一个.xml文件示范一下: 方式二: 在java代码中调用文本视图对象的setText方法设置文本 还 ...
- Spring------Bean的实例化的几种方法
构造方法 提供可访问的构造方法: 无参构造方法被调用: 如果无参构造方法不存在,将抛出异常BeanCreationException 静态工厂 在ApplicaytionContext.xml中使用静 ...
- 在CentOS上编译最新版linux内核(linux-5.19.9)
从官网下载最新版的Linux内核源码,本教程使用linux-5.19.9进行编译. 实验环境(CentOS-Stream-8) $ uname -a Linux localhost.localdoma ...
- 第五章 C控制语句:循环
一个好的语言应该能够提供以下三种形式的程序流: ●顺序执行语句序列(顺序) ●在满足某个条件之前反复执行一个语句序列(循环) ●通过进行一个判断在两个可选的语句序列之间选择执行(分支) 5.1whil ...
- Salesforce CPQ之后续慢慢看系列
salesforce核心两朵云,sales & service. 针对sales的quote / quote line item的报价功能,还是相对薄弱.针对sales,报价的准确性影响着成单 ...
- DIYAUDIO LM3886空板、套件、成品机DIY
diyaudio 3886空板,3886纯后级功放板.最后三张图为成品板子演示图.正确安装后,没有底噪.大水塘电容直径最大35MM.本人已经用这快板子制作了多台成品机,用过的都说好!空板20元,全部1 ...
- SQL Server底层架构技术对比
背景 数据库是信息化的基石,支撑着整个业务系统,发挥着非常重要的作用,被喻为"IT的心脏".因此,让数据库安全.稳定.高效地运行已经成为IT管理者必须要面对的问题.数据库在底层架构 ...
- LabVIEW之同步——集合点vi
这是一个对我来讲比较偏的工具,做过很多项目,没有用它也能完成各种各样的项目. 今天我们一起来了解下这个工具,所以称之为工具,因为它属于NI LabVIEW的白色节点,一般是有官方利用LabVIEW代码 ...
- [PKM] 服务器
1 概述与基础常识 1.1 服务器的定义 定义: 服务器,英文名Server,指能提供某种服务的网络设备. 提供的主要服务包括:数据的接收和传递.数据的存储和数据的处理. 通俗点儿,我们可以把服务器比 ...