better scoll的使用以及注意事项以及左联右

news2025/11/7 2:03:02

在这里插入图片描述
下载better scoll的核心
在这里插入图片描述
在你要使用的页面引入
在这里插入图片描述
在data里面定义一个对象
在这里插入图片描述
然后在createad里面放一个nexttick异步操作。
在这里插入图片描述

上面是获取这个left-box节点是父节点
记住里面只能有一个子节点如果循环了 就要再包一个div就是一个子节点
在这里插入图片描述

左联右 首先也要获取 右边的 父节点 然后配置
在这里插入图片描述
左边这个绑定 vant-ui提供的点击方法
在这里插入图片描述
给右边的 每一个循环的加一个id动态获取dom节点
在这里插入图片描述
然后点击左边联动右边就可以了这个scolltoelemnt是betterscoll里面自带的 滑动到 指定的 dom’节点300是动画效果
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/810702.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RPC与REST有什么区别？

RPC与REST有什么区别？

背景 好多开发的同学在工作中，经常分不清RPC和REST的区别，导致经常沟通不在一个层次上。甚至有些同学把这两个当成同一个东西。 RPC与REST的区别？ 对比名称rpcrest备注架构风格RPC是基于过程调用的架构风格，它将远程方法调用封装为…
阅读更多...
深度学习技巧应用24-深度学习手撕代码与训练流程的联系记忆方法

深度学习技巧应用24-深度学习手撕代码与训练流程的联系记忆方法

大家好，我是微学AI，今天给大家介绍一下深度学习技巧应用24-深度学习手撕代码与训练流程的联系记忆方法，大家都知道深度学习模型训练过程是个复杂的过程，这个过程包括数据的收集，数据的处理，模型的搭建，优化器的选择，损失函数的选择，模型训练，模型评估等步骤，其中缺少…
阅读更多...
gitee使用参考

gitee使用参考

Git代码托管服务 2.1 常用的Git代码托管服务 gitHub（ 地址：https://github.com/ ）是一个面向开源及私有软件项目的托管平台，因为只支持Git 作为唯一的版本库格式进行托管，故名gitHub码云（地址：…
阅读更多...
shell脚本：数据库的分库分表

shell脚本：数据库的分库分表

#!/bin/bash ######################### #File name:db_fen.sh #Version:v1.0 #Email:admintest.com #Created time:2023-07-29 09:18:52 #Description: ########################## MySQL连接信息 db_user"root" db_password"RedHat123" db_cmd"-u${…
阅读更多...
ROS暑期学校分享-2023

ROS暑期学校分享-2023

云课的优势 https://gitcode.net/ZhangRelay/cocubesim 网络编程和单机编程 网络编程和单机编程是两种不同的编程方式，它们的主要区别在于其应用场景和实现技术上。 1 应用场景 网络编程主要用于构建基于互联网的应用程序，例如Web应用程序、网上购物…
阅读更多...
安装typora

安装typora

1、下载压缩包 链接：https://pan.baidu.com/s/1nFvk3hAyXNbvKPJnu9ipIA 提取码：sdyy 2、安装typora 3、打开Crack 4、将这个dll文件复制粘贴到typora的安装路径里
阅读更多...
Linux--进程的新建状态

Linux--进程的新建状态

新建状态： 操作系统创建了进程的内核数据结构（task_struct、mm_struct、页表），但是页表没有创建映射关系，而且磁盘里的程序的代码和数据未加载到物理内存
阅读更多...
Spring注解系列——@PropertySource

Spring注解系列——@PropertySource

在Spring框架中PropertySource注解是非常常用的一个注解，其主要作用是将外部化配置解析成key-value键值对"存入"Spring容器的Environment环境中，以便在Spring应用中可以通过Value或者占位符${key}的形式来使用这些配置。 使用案列 // Propert…
阅读更多...
React 路由使用-详细介绍

React 路由使用-详细介绍

路由初使用 抽象路由模块 src\page\Article\index.js const Article () > {return (<div><p>文章页</p></div>); };export default Article;src\router\index.js // 导入页面 import Article from "../page/Article"; import Login fr…
阅读更多...
Leetcode 剑指 Offer II 037. 小行星碰撞

Leetcode 剑指 Offer II 037. 小行星碰撞

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一个整数数组 asteroids&#xff0c;表示在同一行的小行星。…
阅读更多...
无涯教程-jQuery - Dragable拖动函数

无涯教程-jQuery - Dragable拖动函数

Drag-able 函数可与JqueryUI中的交互一起使用。此函数可在任何DOM元素上启用可拖动功能。无涯教程可以通过使用鼠标单击来拖动可拖动元素。 Drag able - 语法 $( "#draggable" ).draggable(); Drag able - 示例 下面是一个简单的示例&#xff0c;显示可拖动的用法…
阅读更多...
【Java面试丨消息中间件】Kafka

【Java面试丨消息中间件】Kafka

一、kafka是如何保证消息不丢失 1. 介绍 使用kafka在消息的收发过程都有可能会出现消息丢失 &#xff08;1&#xff09;生产者发送消息到broker丢失 &#xff08;2&#xff09;消息在broker中存储丢失 &#xff08;3&#xff09;消费者从broker接收消息丢失 2. 生产者发送消…
阅读更多...
002-Spring Bean 从扫描到创建

002-Spring Bean 从扫描到创建

目录 Spring Bean 从扫描到创建扫描流程 class 到 BeanDefinition引入扫描&#xff1a;ClassPathBeanDefinitionScannerdoScanfindCandidateComponents(basePackage)registerDefaultFilters()this.registry 创建流程 BeanDefinition 到 Bean统一 BeanDefinition 类型finishBean…
阅读更多...
HTML+CSS+JavaScript：轮播图自动播放

HTML+CSS+JavaScript：轮播图自动播放

一、需求 轮播图如下图所示&#xff0c;需求是每隔一秒轮播图自动切换一次 二、代码素材 以下是缺失JS部分的代码&#xff0c;感兴趣的小伙伴可以先自己试着写一写 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /&…
阅读更多...
【笔记】Java并发编程

【笔记】Java并发编程

Callable 和 Runable Java 8 并发教程&#xff1a;Threads和Executors 原文&#xff1a;Java 8 Concurrency Tutorial: Threads and Executors 译者&#xff1a;BlankKelly 来源&#xff1a;Java8并发教程&#xff1a;Threads和Executors 两种提交方式 submit和execute subm…
阅读更多...
【数据结构】带头+双向+循环链表（DList）（增、删、查、改）详解

【数据结构】带头+双向+循环链表（DList）（增、删、查、改）详解

一、带头双向循环链表的定义和结构 1、定义 带头双向循环链表&#xff0c;有一个数据域和两个指针域。一个是前驱指针&#xff0c;指向其前一个节点&#xff1b;一个是后继指针&#xff0c;指向其后一个节点。 // 定义双向链表的节点 typedef struct ListNode {LTDataType dat…
阅读更多...
开发一个RISC-V上的操作系统（五）—— 协作式多任务

开发一个RISC-V上的操作系统（五）—— 协作式多任务

目录 往期文章传送门 一、什么是多任务 二、代码实现 三、测试 往期文章传送门 开发一个RISC-V上的操作系统&#xff08;一&#xff09;—— 环境搭建_riscv开发环境_Patarw_Li的博客-CSDN博客 开发一个RISC-V上的操作系统&#xff08;二&#xff09;—— 系统引导程序&a…
阅读更多...
NO4 实验四：生成Web工程

NO4 实验四：生成Web工程

1、说明 使用 mvn archetype&#xff1a;generate 命令生成 Web 工程时&#xff0c;需要使用一个专门的 archetype。这个专门生成 Web 工程骨架的 archetype 可以参照官网看到它的用法&#xff1a; 2、操作 注意&#xff1a;如果在上一个工程的目录下执行 mvn archetype&…
阅读更多...
LeetCode208.Implement-Trie-Prefix-Tree＜实现 Trie (前缀树)＞

LeetCode208.Implement-Trie-Prefix-Tree＜实现 Trie (前缀树)＞

题目&#xff1a; 思路&#xff1a; tire树&#xff0c;学过&#xff0c;模板题。一种数据结构与算法的结合吧。 代码是&#xff1a; //codeclass Trie { private:bool isEnd;Trie* next[26]; public:Trie() {isEnd false;memset(next, 0, sizeof(next));}void insert(strin…
阅读更多...
第72篇：近年HVV、红队攻防比赛中常见外围打点漏洞的分析与总结

第72篇：近年HVV、红队攻防比赛中常见外围打点漏洞的分析与总结

前言 大家好&#xff0c;我是ABC_123。前一段时间我花时间花精力总结了最近两三年中&#xff0c;在攻防比赛中比较常见的Web打点漏洞类型&#xff0c;捎带着把钓鱼邮件的主题类型也总结了一下。今天分享出来&#xff0c;相信无论是对于攻击方还是防守方&#xff0c;都能从中获…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023