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 = ["星期日","星期一" ...
随机推荐
- XSS(Cross-site Scripting)-跨站脚本
XSS介绍 XSS 是基于 JavaScript 的,因此对该语言有基本的了解会很有帮助.了解XSS需要对客户端-服务器请求和响应有基本的了解 跨站点脚本,在网络安全社区中更广为人知的是 XSS,被归 ...
- Dubbo和Zookeeper(Springboot集成)
Dubbo和Zookeeper集成: 分布式理论: 分布式系统是由一组通过网络进行通信.为了完成共同的任务而协调工作的计算机节点组成的系统.分布式系统的出现是为了用廉价的.普通的机器完成单个计算机无法 ...
- ASP.NET Core Web API Swagger 按标签Tags分组排序显示
需求 swagger页面按标签Tags分组显示. 没有打标签Tags的接口,默认归到"未分组". 分组内按接口路径排序 说明 为什么没有使用GroupName对接口进行分组? 暂时 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——16.封装打印字符串函数
学习操作系统原理最好的方法是自己写一个简单的操作系统. 在上一讲中我们向屏幕打印字符串"GrapeOS"用了十几行汇编代码,如果要输出的字符比较多,这种方法太繁琐了.本讲我们将打印 ...
- SpringBoot——自定义自动配置与起步依赖
SpringBoot--自定义自动配置与起步依赖 SpringBoot为我们提供了灵活强大的自动配置与起步依赖功能,接下来我们参考其实现原理,实现专属于我们自己的自动配置与起步依赖. 不仅如此,我们对 ...
- linux中查看用户和组信息小结
查看当前登录用户的组内成员groups 查看当前登录用户名whoami 查看tom用户所在的组,以及组内成员groups tom 查看所有的用户信息cat /etc/passwd 用户名.密码.用户i ...
- linux使用汇总
linux使用汇总 Linux的目录结构 没有逻辑磁盘分区(C盘.D盘...) 是一棵树形结构,根目录是/ 根目录下边有几个文件夹,需要我们了解: /etc:配置文件所在的文件夹.比如:安装JDK,配 ...
- 机器学习基础02DAY
数据的特征预处理 单个特征 (1)归一化 归一化首先在特征(维度)非常多的时候,可以防止某一维或某几维对数据影响过大,也是为了把不同来源的数据统一到一个参考区间下,这样比较起来才有意义,其次可以程序可 ...
- Java 序列化的缺点
Java 提供的对象输入流(ObjectInputStream)和输出流(ObjectOutputStream),可以直接把 Java 对象作为可存储的字节数据写入文件,也可以传输到网络上.对于程序员 ...
- Qt连接不上Linux服务器?
目录 1. Qt连接代码 2. 问题分析(按照顺序排除) 2.1 服务器IP是否能被Ping通? 2.2 客户端中的服务器IP和Port是否填写正确? 2.3 Linux的代码处理是否正确? 2.4 ...