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选日期滚动条自动定位到选定的日期位置的更多相关文章

  1. vue 内容增加滚动条自动定位至底部

    this.$nextTick(() => { document.body.scrollTop = document.body.scrollHeight; console.log(document ...

  2. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  3. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  4. vue中关于滚动条的那点事

    vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...

  5. OpenJudge计算概论-Tomorrow never knows【输入日期计算下一天的日期】

    /*====================================================================== Tomorrow never knows? 总时间限制 ...

  6. js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时

    js字符串转日期,js字符串解析成日期,js日期解析, Date.parse小时是8点,Date.parse时间多了8小时 >>>>>>>>>&g ...

  7. sql生成连续日期(年份、月份、日期)

    此随笔主在分享日常可能用到的sql函数,用于生成连续日期(年份.月份.日期) 具体的看代码及效果吧! -- ============================================= ...

  8. js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内

    /** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...

  9. js替换全部,js检查输入的日期是否是一个正确的日期格式

    <script language="javascript"> var str = "我爱的人和爱我的人,我爱的人和爱我的人"; var newstr ...

  10. 通过javascript的日期对象来得到当前的日期,并输出--内置对象---JS

    //通过javascript的日期对象来得到当前的日期,并输出. var mydate = new Date(); var week = ["星期日","星期一" ...

随机推荐

  1. JMeter压测脚本实例:单接口

    新建测试计划 添加线程组 添加HTTP请求 配置该请求相关参数 1.请求头部信息 ①HTTP请求同级线程组下添加HTTP信息头部管理器 ②填充该请求所需的头部信息 2.请求体 选中之前增加的HTTP请 ...

  2. Scanner进阶使用

    Scanner 进阶使用 package com.andy.base.scanner; import java.util.Scanner; public class Demo04 { public s ...

  3. 《golong入门教程📚》,从零开始入门❤️(建议收藏⭐️)

    Go语言学习笔记 本菜鸟的Go语言学习笔记,历时1个月,包含了Go语言大部分的基本语法(不敢说全部),学习期间参考了各种视频,阅读了各种文章,主要参考名单如下: 点击跳转到参考名单<( ̄︶ ̄)& ...

  4. MySQL 慢查询优化案例

    一.慢查询优化基本步骤 [1]先运行看看是否真的很慢,注意设置SQL_NO_CACHE(查询时不使用缓存):[2]where条件单表查,锁定最小返回记录表.这句话的意思是把查询语句的 where都应用 ...

  5. 简单部署halo博客

    第一步,购买服务器,安装宝塔linux面板. 第二步,在宝塔linux面板的软件商店安装docker管理器 第三步,配置阿里云镜像加速 修改镜像加速 vim /etc/docker/daemon.js ...

  6. Distinctive Image Features from Scale-Invariant Keypoints 论文解读

    Distinctive Image Features from Scale-Invariant Keypoints 论文解读 著名的SIFT local feature提取方法 Scale-space ...

  7. vue指令之事件指令

    目录 什么是事件指令 示例 什么是事件指令 事件指的是:点击事件,双击事件,划动事件,焦点事件... 语法 v-on:事件名='函数' # 注意:函数必须写在 methods配置项中 示例 # 点击按 ...

  8. HaProxy 安装搭建配置

    HaProxy简介 HAProxy是一个免费的负载均衡软件,可以运行于大部分主流的Linux操作系统上. HAProxy提供了L4(TCP)和L7(HTTP)两种负载均衡能力,具备丰富的功能.HAPr ...

  9. [Windows]CMD命令入门教程 与 Windows常见维护问题

    本博文最早是记录在本地电脑的,由于清理电脑的缘故,顺便将这篇笔记转移到公共博客,以便日后查阅和快速上手使用. 开门见山,步入正题,以下是Windows系统的常用CMD命令. ----2018-03-2 ...

  10. day12:闭包函数&匿名函数(lambda)

    闭包函数 闭包函数的定义: 如果内函数使用了外函数的局部变量并且外函数把内函数返回出来的过程 叫做闭包里面的内函数是闭包函数 一个简单的闭包函数示例: def songyunjie_family(): ...