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

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

实现效果：

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

第一步：静态布局

html：

            
            

                

                    
                        {{myliebiaoList.name}}
                    
                

            

            
            

                                  
                        

{{lunbo.name}}

                              
            

        

js：

//引入vue.js

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

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

利用vue中的v-bind实现：

给li标签绑定class：   

                                          {{myliebiaoList.name}}
                                   

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

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

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

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

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

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

1.引入下载好的swiper

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

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

//这是下方内容盒子

                

                    

                        

class="swiper-slide">{{lunbo.name}}

                    

                

   

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实现点击上方导航，下面内容滑动切换，滑动下方内容，上方导航自动切换的效果就大功告成了！

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

 

附全部代码：

    
        
        
        
        
        
    

    
        

            
            

                

                    
• 
                          {{myliebiaoList.name}}
                      

                

            

            
            

                

                    

                        

{{lunbo.name}}