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系列之性能优化--懒加载

一、懒加载的基本概念 懒加载是一种按需加载技术,即在用户需要时才加载相应的资源,而不是在页面初始加载时一次性加载所有资源。这样可以减少页面初始加载的资源量,提高页面加载速度和用户体验。 二、Vue 中的懒加载 在 Vue.js 中,懒加载主要用于路由组件的按需加载。Vue Router 提供了非常便

深入理解 Vue 3 组件通信

在 Vue 3 中,组件通信是一个关键的概念,它允许我们在组件之间传递数据和事件。本文将介绍几种常见的 Vue 3 组件通信方法,包括 props、emits、provide 和 inject、事件总线以及 Vuex 状态管理。 1. 使用 props 和 emits 进行父子组件通信 props

Vue 3 后端错误消息处理范例

前端如何存储处理后端返回的错误信息,并按不同来源绑定到页面,例如显示在不同输入框的周围。这样即可实现清晰的错误显示。

Vue - 入门

零:前端目前形势 前端的发展史 HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看 Ajax的出现 -> 后台发送异步请

Vue 3深度探索:自定义渲染器与服务端渲染

这篇文章介绍了如何在Vue框架中实现自定义渲染器以增强组件功能,探讨了虚拟DOM的工作原理,以及如何通过SSR和服务端预取数据优化首屏加载速度。同时,讲解了同构应用的开发方式与状态管理技巧,助力构建高性能前端应用。

Vue第三方库与插件实战手册

这篇文章介绍了如何在Vue框架中实现数据的高效验证与处理,以及如何集成ECharts、D3.js、Chart.js等图表库优化数据可视化效果。同时,探讨了Progressive Web App(PWA)的接入与优化策略,以提升Web应用的用户体验与加载速度。

理解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 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/24 16:31:13 updated: 2024/5/24 16:31:13 categories: 前端开发 tags: Vue3特性 CompositionAPI Teleport Suspense Vue3安装 组件