你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

基于vue实现移动端点击上方导航，内容滑动切换，滑动内容导航自动切换。_vue slidechangetransitionstart

作者：你好赵伟 | 2024-04-05 05:41:59

踩

vue slidechangetransitionstart

这是在日常开发过程中常见的选项卡(带滑动切换效果),小白一枚，不足之处还望体谅，包涵，这也是第一次尝试写博客，以后会继续分享一些工作中的问题与收获。

实现效果：

点击上方导航，当前导航添加样式，下方内容滑动切换，滑动下方内容上面导航切换。

第一步：静态布局

html：

<div id="lao" class="warp">
           
           <div class="navList">
               <ul>
                   <li v-for="(myliebiaoList,index) in myList">
                       {{myliebiaoList.name}}
                   </li>
               </ul>
           </div>

<div class="mainContent">
                       <div v-for="lunbo in myContent" >{{lunbo.name}}</div>
           </div>
       </div>

js：

var vm = new Vue({

el: '#lao',

data: {

  myList: [
           {
                   name: '吃'
               },
               {
                   name: '大'
               },
               {
                   name: '白'
               },
               {
                   name: '菜'
               },
               {
                   name: '的'
               },
               {
                   name: '熊'
               }
           ], //存放类型列表
           myContent: [
           {
                   name: '吃'
               },
               {
                   name: '大'
               },
               {
                   name: '白'
               },
               {
                   name: '菜'
               },
               {
                   name: '的'
               },
               {
                   name: '熊'
               }
           ] //存放内容列表

}

})

</script>

基本的上下结构静态页面布局已经有了。

第二步：点击当前上方导航添加样式

利用vue中的v-bind实现：

给li标签绑定class： <li :class="{myColor:index==isActive}" @click="liseGo(index)" v-for="(myliebiaoList,index) in myList">
{{myliebiaoList.name}}
</li>

在style中定义：myColor {
background: turquoise;
color: white;
}

在js中添加点击事件：liseGo(index) {
this.isActive = index;
}

isActive在data中声明为0，默认给第一个导航添加样式(通过v-for遍历的，下标从0开始)

这个时候点击上方当前导航的时候是可以实现添加样式。

第三步：点击下方内容滑动切换

注：使用swiper实现内容左右滑动

1.引入下载好的swiper

/*可自行去swiper官网下载*/

2.参照官方使用方法，改变下方内容布局

//这是下方内容盒子

<div class="mainContent">
               <div class="swiper-container">
                   <div class="swiper-wrapper">
                       <div v-for="lunbo in myContent" class="swiper-slide">{{lunbo.name}}</div>
                   </div>
               </div>
   </div>

3.写入对应的js

//在methods中封装一个swiper方法

1. getSwiper() {
// swiper-container class名称
               this.mySwiper = new Swiper('.swiper-container', {
                   autoplay: false, //可选选项，自动滑动
               })

}

//direction: 'vertical', // 垂直切换选项 (可自己选择垂直还是左右滑动)

2.在钩子函数:mounted中调用封装的方法

mounted() {
// 初始化swiper
this.getSwiper();
}

这个时候下方内容效果实现了，可以左右滑动切换

上方导航点击当前有样式，下方内容也可以滑动切换，下面要做的就是把导航跟内容关联起来

第四步：点击上方导航下方内容滑动切换

参照swiper官方文档api，有个方法控制Swiper切换到指定slide。

使用方法：mySwiper.slideTo(index, speed, runCallbacks)

index	num	必选	指定将要切换到的slide的索引
speed	num	可选	切换速度(单位ms)
runCallbacks	boolean	可选	设置为false时不会触发transition回调函数

在点击事件中添加该方法:

liseGo(index) {
this.isActive = index;

this.mySwiper.slideTo(index, 500, false); //切换到第index个slide，速度为0.5秒
}

添加该方法后，点击上方导航，下面内容是可以实现滑动切换指定内容的。

最后一步：左右滑动下方内容，上方导航跟着切换

一样参照官方api文档，找到方法：slideChangeTransitionStart //回调函数，swiper从当前slide开始过渡到另一个slide时执行

用法：on: {

slideChangeTransitionStart: function(){

//在回调中写入逻辑处理

that.isActive = this.activeIndex;

//一定要重新声明this指向，因为该方法中的this.activeIndex指向的是swiper实例本身，而isActive则指向的是vue实例本身

}

//输出的activeIndex是过渡后的slide索引。

这样基于vue+swiper实现点击上方导航，下面内容滑动切换，滑动下方内容，上方导航自动切换的效果就大功告成了！

第一次写博客，不足之处多多体谅。

附全部代码：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>动态切换</title>
       <link rel="stylesheet" href="./dist/css/swiper.min.css">
       <style type="text/css">
           * {
               padding: 0;
               margin: 0;
               font-size: 24px;
           }

           .warp {
               width: 100%;
               height: 100vh;
               background: white;
           }

           ul {
               display: -webkit-box;
               overflow-x: scroll;
               white-space: nowrap;
           }

           ul>li {
               width: 62.5px;
               text-align: center;
               display: inline-block;
               padding: 5px 10px;
               box-sizing: border-box;
               height: 50px;
               line-height: 50px;
               border: 1px solid #c3c3c3;
               text-align: center;
           }

           .navList {
               overflow: hidden;
           }

           .swiper-wrapper>div:nth-child(1) {
               height: 150px;
               line-height: 150px;
               background: pink;
               text-align: center;
           }

           .swiper-wrapper>div:nth-child(2) {
               height: 150px;
               line-height: 150px;
               background: blanchedalmond;
               text-align: center;
           }

           .swiper-wrapper>div:nth-child(3) {
               height: 150px;
               line-height: 150px;
               background: seagreen;
               text-align: center;
           }

           .swiper-wrapper>div:nth-child(4) {
               height: 150px;
               line-height: 150px;
               background: blue;
               text-align: center;
           }

           .swiper-wrapper>div:nth-child(5) {
               height: 150px;
               line-height: 150px;
               background: lawngreen;
               text-align: center;
           }
           .swiper-wrapper>div:nth-child(6) {
               height: 150px;
               line-height: 150px;
               background: purple;
               text-align: center;
           }
           .myColor {
               background: turquoise;
               color: white;
           }
       </style>
   </head>

<body>
       <div id="lao" class="warp">
           
           <div class="navList">
               <ul>
                   <li :class="{myColor:index==isActive}" @click="liseGo(index)" v-for="(myliebiaoList,index) in myList">
                       {{myliebiaoList.name}}
                   </li>
               </ul>
           </div>

<div class="mainContent">
               <div class="swiper-container">
                   <div class="swiper-wrapper">
                       <div v-for="lunbo in myContent" class="swiper-slide">{{lunbo.name}}</div>
                   </div>
               </div>
           </div>
       </div>
   </body>

</html>

           }
       },
       mounted() {
       // 初始化swiper
           this.getSwiper();
       }
   })
</script>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】