<!-- 交互的逻辑 1==》如何实现 点击当前的那个菜单 给被点击的元素添加样似 @click="getclcik(index)" 记录当前被点击的元素的下标 :class="{active:cur==index} 如果匹配成功,则给这个元素添加一个类active 2==》如何只显示 点击下标与之
转载
2022-09-01 17:38:10
550阅读
介绍Vue Router Tab 是基于 Vue.js 和 Vue Router 的路由页签组件,用来实现多页签页面的管理。官网演示包含的功能✅ 响应路由变化来打开或切换页签✅
原创
2021-09-08 10:22:15
905阅读
<template> <view> <!-- 内容 --> <view class="content_box"> <view class="content"> <!-- 分类 --> <view class="classification"> <text @click="taskSwitch(0)"
原创
2022-11-26 12:15:52
395阅读
vue中借助vue happy scroll实现局部文字滚动
原创
2022-03-10 09:46:12
425阅读
前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。正文 插槽是什么? 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。简
转载
2024-05-25 11:00:15
86阅读
vue中借助vue happy scroll实现局部文字滚动
原创
2021-09-01 13:55:18
646阅读
1, mounted中绑定div滚动事件: this.$refs.box.addEventListener('scroll', this.scrollToTop) 2,scrollToTop方法中获取当前距离顶部高度: this.scrollHeight= this.$refs.box.scroll ...
转载
2021-09-15 20:27:00
1606阅读
2评论
官网:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 下载: 链接:https://pan.baidu.com/s/1VjcwhVpUFAlHFQfFgr-iWg 提取码: ...
转载
2021-07-23 11:08:00
496阅读
2评论
### Vue Scroll 在 iOS 中不正常的表现
在开发基于 Vue.js 的应用时,往往会遇到各种兼容性问题,尤其是在移动设备上。iOS 的 Safari 浏览器可能会在滚动表现上显得特别“乖张”,这使得开发者在实现滚动效果时可能会遇到一些挑战。本文将探讨这个问题,并提供解决方案。
#### 背景
在 iOS 上的 Safari 浏览器中,使用默认的滚动行为可能导致一些意外的结果。
原创
2024-10-09 06:04:24
14阅读
前提说明:为了降低阅读负担,以下只贴出关键代码,读者可参考着改1、修改前的代码:showList数据来源于后端<div class="group-item" ref="wrapper"
<ul class="content" v-for="(item, index) in showList">
<li> {{ item.title
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
转载
2021-09-14 21:31:00
288阅读
2评论
在项目中经常用到滚动,结合Better scroll封装了sroll.vue组件参考链接:https://ustbhuangyi.github.io...http://.imooc.com/article/... better scroll 只处理容器(wrapper)的第一个子元素(cont
转载
2018-12-15 20:49:00
83阅读
2评论
1.1 安装1.1.1 npmnpm install vue-seamless-scroll --save1.1.2 CDNhttps://cdn.jsdelivr.net/npm/vue-seamle
转载
2022-07-18 10:19:01
661阅读
<ul> <v-li></v-li> </ul> 而这样写肯定是不行的,这就需要用到 is 特性了。 <ul> <li is="v-li"></li> </ul> 这也就是为什么利用 is 特性可以实现动态切换组件的效果。 keep-alive 指令可以将切换出去的组件保留在内存中,可以保留它的状态
原创
2021-05-20 19:54:56
3785阅读
<style> .active{ color: red; } div a{ display: block; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <!-- 1 循环
原创
2022-09-01 18:05:29
228阅读
Vue3.x使用Swiper Vue插件最新详细教程(包含修改swiper样式)简介Vue和swiper版本:安装Swiper我这里通过npm i swiper -S来安装完整代码如下可以直接写到你的组件当中,不需要从别的地方引入<template>
<div class="swiperbox">
<swiper
:slidesPerView="1"
注意:this.$publicFunction.debounce(this.sayDebounce, 800) (如果没有封装防抖函数---了解防抖点击)可以直接改为 this.sayDebounce()1.scroll实现你
原创
2022-07-25 16:27:26
344阅读
<template> <vue-seamless-scroll :data="CardPartsStatisticsList" class=
原创
2023-02-22 10:52:01
225阅读
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。常用效果:移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。npm install better-scroll --saveimport BScroll from 'b
JQuery操作JQuery是一个JS库,它可以让DOM操作变得更简单在使用JQ时必须调用这个库<script type="text/javascript" src="js/jquery.min.js">
</script>
//我这是下载好了 在文件调用,可以在网上下载或者运用网上某个网站也行1.节点的获取:$(CSS选择器)<div id="div1">
转载
2024-01-14 11:12:43
41阅读