让swiper动起来

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

因为热爱所以坚持~

前言

昨天讲了swiper的骨架：juejin.cn/post/702560… ，今天给它装上肌肉。这里所谓的肌肉，就是可以让它动起来的JavaScript相关内容。

回顾

这是大致的需求实现效果图，list1为[1,2,3],当然实际是调用接口获得的返回值。表头这一部分选择用下面这种方式展示：

<ul>
    <li v-for="(item,index) in list1" :key="index" :class="[{isactive3:xzlx==index}]" @click="lxClick(index,item)"><span>{{item}}</span></li>
</ul>

肌肉

主体部分主要是slide，因为要和list1里的项对应，所以这里v-for遍历的对象也应该是list1.

<div class="swiper-container-tab fd-swiper-container-tab" ref="swiperTab">
    <div class="swiper-wrapper">
         <div class="swiper-slide fd-table" v-for="(item,index) in list1" :key="index">

initSwiper() {      
    let _this = this;
    new Swiper(".swiper-container-tab", {
        roundLengths : true, //防止文字模糊    
            on: {
                init: function() {
                    console.log('init')
                    _this.$refs["swiperTab"].swiper.update();            
                    _this.activeIndex = _this.$refs["swiperTab"].swiper.activeIndex;
                    let current = _this.activeIndex;  
                    _this.lxClick(current, _this.cklxList[current]);        
                 },    
                 transitionEnd: function() {
                     console.log('transitionEnd')
                     _this.$refs["swiperTab"].swiper.update();            
                     _this.activeIndex = _this.$refs["swiperTab"].swiper.activeIndex;
                     let current = _this.activeIndex;            
                     _this.lxClick(current, _this.cklxList[current]);        
                 },
                 resize: function(){
                      _this.$refs["swiperTab"].swiper.update();
                      _this.activeIndex = _this.$refs["swiperTab"].swiper.activeIndex;     
                      let current = _this.activeIndex;  
                      _this.lxClick(current,_this.cklxList[current]);
                 },
              },
            });          
        },

现在swiper已经可以正常滑动了，这里面还用到了滑块当前的滑动页的下标：activeIndex;用它是因为需要和表头的list1里的项做一个联动的效果出来，希望滑块滑动时对应的项也会出现相应的效果：

同时呢也希望点击表头里list1里的项时，滑块展示相应的slide,所以也给表头list1加了一个点击事件，代码如下：

lxClick(index,item){
    let w = this.$refs["swiperTab"].offsetWidth;
    $(".swiper-container-tab").find(".swiper-wrapper").css("transform", "translate3d(-" + w*index + "px, 0px, 0px)");
    this.xzlx = index;
    this.initData();//处理数据
}

最后再处理一下相应的样式即可，这里是做一个简单的记录，大致逻辑及框架都在，剩下的就是一些细节上的修饰。

总结

学习效率最高的方法就是动手实践，我们平时会经常看到这种滑块，虽然有现成的组件可以直接使用，但是最好先理解了它最初的样子，这样使用别人封装好的工具会更高效！