Vue选日期滚动条自动定位到选定的日期位置

日期,位置,滚动条,自动 · 浏览次数 : 33

小编点评

Sure, here's a summary of the key points: **HTML:** * `   :id=\"'scroll'+index\"`: This code creates unique IDs for each item in the `weekList` based on the `index` of the item. * ` :scroll-into-view=\"intoIndex\"<view class=\"week-day-item\" v-for=\"(item,index) in weekList\" :key=\"index\"`: This code defines a scroll-to behavior for each item in the `weekList`. It uses dynamic `id` and `v-for` to dynamically generate unique IDs and assign a scroll-to handler to each item. * `methods:{ ...}

正文

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选日期滚动条自动定位到选定的日期位置

html 这里的关键点就是 :id="'scroll'+index" 以及 :scroll-into-view="intoIndex"

手撕Vue-编译指令数据

经过上一篇的分析,完成了查找指令和模板的功能,接下来就是编译指令的数据了。 所以本章节主要处理的方法则是 buildElement 方法,我们先分析一下我们所拿到的数据在进行编码,这样会更加清晰一些。 我将 name, value 打印出来,分别对应的值是 name: v-model, value:

VUE知识体系、VUE面试题

1. computed(计算属性)和方法有什么区别? 计算属性本质上是包含 getter 和 setter 的方法 当获取计算属性时,实际上是在调用计算属性的 getter 方法。vue 会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 方法没有缓存,每次调用方法都

Vue 3入门指南

title: Vue 3入门指南 date: 2024/5/23 19:37:34 updated: 2024/5/23 19:37:34 categories: 前端开发 tags: 框架对比 环境搭建 基础语法 组件开发 响应式系统 状态管理 路由配置 第1章:Vue 3简介 1.1 Vue.j

Vue 3 组件基础与模板语法详解

title: Vue 3 组件基础与模板语法详解 date: 2024/5/24 16:31:13 updated: 2024/5/24 16:31:13 categories: 前端开发 tags: Vue3特性 CompositionAPI Teleport Suspense Vue3安装 组件

Vue 3指令与事件处理

title: Vue 3指令与事件处理 date: 2024/5/25 18:53:37 updated: 2024/5/25 18:53:37 categories: 前端开发 tags: Vue3基础 指令详解 事件处理 高级事件 实战案例 最佳实践 性能优化 第1章 Vue 3基础 1.1 V

理解Vue 3响应式系统原理

title: 理解Vue 3响应式系统原理 date: 2024/5/28 15:44:47 updated: 2024/5/28 15:44:47 categories: 前端开发 tags: Vue3.x TypeScript SFC优化 Composition-API Ref&Reactive

Vue源码学习(十一):计算属性computed初步学习

好家伙, 1.Computed实现原理 if (opts.computed) { initComputed(vm,opts.computed); } function initComputed(vm, computed) { // 存放计算属性的watcher const watchers = vm

在Vue中使用Canvas绘制背景

好家伙, 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别 法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到cancas元素; 创建context对象;getContext() 方法返回一个用于画布上绘图环境;参数 ‘2

Vue源码学习(一):数据劫持(对象类型)

好家伙,了解一下Vue如何实现数据劫持 1.Vue中data的使用 首先,我得搞清楚这玩意的概念,我们先从vue的使用开始吧 想想看,我们平时是如何使用vue的data部分的? 无非是这两种情况 (你可千万不要带着惊讶的表情说"啊!原来有两种写法的吗") //函数写法 data() { return