vue+swiper实现左右滑动内容区同时导航高亮

最新推荐文章于 2023-04-21 14:19:30 发布
最新推荐文章于 2023-04-21 14:19:30 发布
阅读量1.2k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhxlin/article/details/105094231
版权

vue+swiper实现左右滑动内容区同时导航高亮

曾经碰了不少坑，在搞明白各种参数传递之后恍然大悟，主要是利用index索引在不同组件间传递，使二者产生联系。

附上实现效果图：
在这里插入图片描述
这里我主要是实现上方导航的点击跳转到相应的内容区以及滑动内容区上方导航高亮

实现的代码

首先创建好所需要的组件文件，然后在router中index.js引入相应的组件
在这里插入图片描述

最低0.47元/天 解锁文章
hhxlin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
weixin_30522183的博客
12-01 2575
Vue如何实现左右滑动内容区控制导航tab同时切换高亮，实现的效果是：点击导航按钮时内容区发生改变，左右滑动内容区时导航按钮跟随切换高亮，停留在某个内容区时刷新页面后仍然停留在当前内容区。 这里涉及到几个点： 1.左右滑动，那就需要用到swiper，当然你可以自己写一个类似的功能，虽然不难但是项目开发中可能会比你引入插件要耗时很多...
vue 实现锚点和滚动高亮效果
fendoudemayi159的博客
11-21 684
锚点和滚动高亮效果
vue实现点击按钮左右滚动
最新发布
c_c_____的博客
04-21 1422
【代码】vue实现点击按钮左右滚动。
angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
u011927449的博客
07-23 309
首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>
vue-浏览器滚动事件——内容滚动，导航栏随之高亮
weixin_50508597的博客
08-13 857
思路： 1：本人是基于vue框架，在使用offsetTop的时候找不到body所以首先用递归找到body 2：找出每一块内容的距离顶部的距离存起来 3：调用浏览器滚动事件 4:在事件内循环元素距离顶部的数组{ if(，如果浏览器滚动的距离+100（这个100是自己根据情况而定的，我的一百是基于元素的顶部标题位置）>=每一块内容的距离顶部[0]){ this.indexx=index }} 5：通过vue的底层元素 给导航绑定：：class=‘indexx==index’?‘高亮样式’：‘’ 整个思
vue+swiper实现左右滑动的测试题功能
01-21
最近在做一个测试题，前后可以切换题目，点击按钮选择答案，选择答案的同时改变按钮的背景色，如下图所示： 初始代码 我用了vue和swiper。所有的题目是一个对象数组，通过v-for渲染： <swiper ref=mySwiper ...
vue+swiper实现侧滑菜单效果
12-29
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码，供大家参考，具体内容如下 先上效果图： 这个左右滑动以及上下滑动主要使用了Swiper的轮播功能，首先是该自定义组件的代码： <swiper options=...
vue使用swiper实现左右滑动切换图片
01-18
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper...
vue+swiper实现组件化开发的实例代码
08-29
Vue+Swiper实现组件化开发的实例代码详解 在本篇文章中，我们将探讨如何使用 Vue 和 Swiper 实现组件化开发的实例代码。组件化开发是一种软件开发模式，它将整个应用程序拆分成多个小的、独立的组件，每个组件负责...
vue 搜索列表，搜索结果高亮，且页面滚动到指定位置
大哼的小世界
04-05 431
效果图如下： template部分代码： //搜索框 <el-input placeholder="请输入单位名称" prefix-icon="el-icon-search" @keyup.enter.native="searchCompany" v-model="search_key"> </el-input> //列表 <div class="all_company" id="all_company" ref="all_company">
swiper插件
wang9rui的博客
11-08 629
使用swiper4.0一些踩坑总结 数据保证拿到后在初始化，eg:使用vue中v-if指令判断 销毁swiper const swiperEg=new swiper; if (swiperEg) { swiperEg.destroy(false); } 默认高亮展示第几个swiper（展示中间||第一个） // 只有一条数据是否自动轮播 const autoConfig = 只有一条数据 ? false : { delay: 4000, stopOnLastSlide: true, disableOnIn
vue使用swiper轮播切换页面和导航栏整合一起食用
weixin_42594419的博客
02-13 395
您好！ 使用 vue 和 swiper 进行页面轮播和导航栏整合可以采用以下步骤： 安装 swiper：使用 npm 安装 swiper，命令为：npm install swiper。 在 vue 组件中引入 swiper：在 vue 组件的 script 标签中引入 swiper，代码如下： import Swiper from 'swiper'; export default { ...
vue-seamless-scroll无缝滚动+高亮显示中间行
qq_43691078的博客
06-10 743
1、vue-seamless-scroll的安装与使用 npm install vue-seamless-scroll --save 2、然后在main.js文件里面引入使用： import scroll from 'vue-seamless-scroll' Vue.use(scroll) 3、高亮显示 .purchaseActive { position: absolute; left: 45px;
微信小程序：轮播图中间大两边小、中间高亮显示
weixin_37378399的博客
01-10 7440
效果展示： test.wxml: &amp;amp;amp;lt;swiper display-multiple-items='1' current='{{ centerItem }}' bindchange='changeFun' circular='true' previous-margin='50' next-margin='50' autoplay='true' interval='2000'&amp;amp;amp;gt; ...
Swiper的使用
dxj124的博客
07-30 350
文档：https://www.swiper.com.cn/api/index.html 参考博客：https://www.cnblogs.com/hellman/p/6051508.html 初始化： //html 1.这里最外层的 swiper-container class是用来初始化的时候对应的js里面的class； 2.初始化的里层的元素，必须含有 swiper-wrapper的...
关于swiper滑动时a标签误触，导致跳转的解决办法。（简单粗暴）
ma_hao99的博客
05-30 1170
var swiper = new Swiper('.swiper-container', { on: { touchStart: function(event){ event.stopPropagation() }, }, });
轮播中小按钮的切换和高亮效果
weixin_44543308的博客
02-22 545
轮播切换高亮的效果图 开发工具与关键技术：DW javascript 作者：沈金凤 年级：18级（5）班 撰写日期：2019年2月2日 轮播一般都会有几张图片来完成的，所以会用到轮播切换高亮效果来实现它。源代码如下： Css样式如下： 最后还要用到JavaScript的i++的自增和判断高亮的位置，js样式如下： 效果图如下： ...
【vue组件封装】根据页面滚动高亮显示目录的侧边栏
m0_68324632的博客
07-26 2739
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。......
vue滚动置顶&滚动跟随至选中高亮行
晨的一朵云的博客
01-24 1961
需求：父页打开弹窗，弹窗子页显示数据列表。父页存在筛选条件时，子页打开直接滚动至对应条目，并高亮。 首先列表dom是通过表格数据循环所得，要做滚动跟随，必须设置态id；然后利用元素id选择器，自动滚动到对应dom位置；高亮利用:class属性和循环index来完成： <div ref="barList"> <div v-for="(item, index) in tableData" :key="index" class="bar-item"
vue3 + swiper
04-07
Vue3-Swiper is a Vue 3 component library for creating responsive and mobile-friendly sliders, carousels, and galleries. It is a wrapper around the popular Swiper.js library and offers a simple and intuitive API for building advanced slide-based interfaces. With Vue3-Swiper, you can easily create customizable and interactive slideshows with a range of features such as lazy loading, autoplay, pagination, navigation, and more. The library supports touch gestures and smooth animations, making it ideal for mobile-first applications. Installation of Vue3-Swiper is straightforward, and the library can be integrated with Vue 3 projects using the Vue CLI or a CDN. Once installed, you can use the component in your templates and customize it using props and events. Overall, Vue3-Swiper is an excellent choice for building dynamic and engaging slide-based interfaces in Vue 3 applications.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值