天兴工作室

给客户做一个zblog模板，手机端需要实现一个滑动导航栏的需求。分为上下两部分，一级分类显示在上面当导航栏，下面则显示该分类的子分类，左右滑动可切换。

于是准备直接用swiper实现，直接new了两个Swiper对象，然后绑定切换，这个效果Swiper官网有案例的。

然后出现了一个问题，当打开列表页的时候导航栏需要切换到当前分类并高亮显示，底部也要切换到对应的子分类模块显示。

尝试了一些方法后用“slideTo”这个方法解决了，分享下思路过程和代码。

首先了解下“slideTo”这个方法的参数，官方文档说明：https://www.swiper.com.cn/api/methods/109.html；

思路大概就是循环导航栏swiper，对比哪一个跟当前页面的链接是相同的，然后获取它的“data-swiper-slide-index”值；

然后用“slideTo”方法，把上面获取到值赋给子分类模块的swiper，即可实现需求。

代码：

导航栏swiper的class为“gallery-thumbs”，子分类模块swiper的class为“galleryTop”。js代码如下：

var surl = location.href;
$(".gallery-thumbs .swiper-slide a").each(function() {
    if ($(this).attr("href") == surl) {
        var liebs = $(this).parent().attr("data-swiper-slide-index");
        var liebss = liebs - 1;
        galleryTop.slideTo(liebss,0, false);
    }
});

最后总结下，swiper确实很强大。

最近的zblog主题基本都内置了Swiper幻灯片组件，今天在调试幻灯片设置图片自动高度的时候踩了个坑，记录下来，希望能帮助踩到同样坑的人。

Swiper幻灯片设置图片自动高度官方是给了“autoHeight”这个配置的，默认是“false”，要使用的时候直接在Swiper配置里面加上“autoHeight: true,”就行，如下图：

坑在哪里呢？

我在自己写的代码里面加上这个配置项后发现毛线作用没用！

先开始以为是css里面固定了图片高度导致的，然后去掉css里面的参数，发现还是没用。

然后就开始自我怀疑了，网上也搜索了下，基本没看到有用的解决方案。

最后的最后福至心灵的想到是不是我的Swiper里面的js有问题？复制了官方了“swiper.min.js”替换掉我的。发现问题解决了。

哦。

原来是版本问题。

低版本的swiper是不支持“autoHeight”这个配置。

用Swiper 4.5.0版本是可以的。

问题解决了，过程就是这么煞笔。

前端的东西接触多了，自然而然的会接触到各种前端框架和js插件。框架和插件的好处是不需要自己去重复造轮子，节省时间精力还不容易出错（毕竟出名的框架都经过了验证）；至于坏处么我觉得肯能就是技术方面得不到成长了吧...

本文介绍的是一款javascript插件，名字叫做“swiper”

插件介绍：

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

插件官网：

http://www.swiper.com.cn/。

个人点评：

个人之前一直用的是“SuperSlide”这一块js插件，功能比较齐全，唯一的缺点就是不支持响应式，现在这个移动端流量已经超过了pc端的时代，这一个缺点尤为致命。所以一直在找一款可以完全替换“SuperSlide”的插件，后来就找到了“swiper”。

使用了这么久就个人体验来说，做一般的项目是绝对够用了，功能多文档全教程也多，虽然仅仅用来做做幻灯片有点浪费了，可能是我还比较菜没有完全挖掘出潜能吧，其他的什么tab切换、弹窗不复杂的就自己写，复杂的也能直接用layui之类的框架了。