最近做了个用swiper切换四个tab无线滚动的需求，之前没用过swiper，使用过程中遇到一些问题，解决完后还是很好用的，记录下。
<div class="GJ_Gp gp-health-list container swiper-container" data-module="vue2,swiper,modules/newlist2" id="content">
<div class="tab" id="tab">
<div class="inner">
<span :class="{active: tabIndex == 0}" @click="set(0)" id="tj" class="tabs">推荐</span>
<span :class="{active: tabIndex == 1}" @click="set(1)" id="jk" class="tabs">健康</span>
<span :class="{active: tabIndex == 2}" @click="set(2)" id="qw" class="tabs">趣味</span>
<span :class="{active: tabIndex == 3}" @click="set(3)" id="fx" class="tabs">患病风险</span>
</div>
</div>
<div class="wrap swiper-wrapper">
<ul class="swiper-slide" id="tuijian" data-hash="slide1">
<li v-for="list in list1">
<a :href="list.accessUrl">
<img alt="" :src="list.listPic">
</a>
<div class="didTest" v-cloak><span v-text="list.testCount + '人已测试'"></span></div>
</li>
<#--tuijian-->
</ul>
页面结构大概是，顶部一个fixed定位的tab用来充当pageination的作用，每个span下面用伪元素来做小蓝条，绑定active 来切换显示，当页面进来mounted之后发起四个请求分别将请求回来的数据灌满四个ul(分别对应4个swiper-slide) ,然后就是需求中有两个swiper-slide是有直接的入口链接的，从链接处点击进来要求直接定位到当前tab下，这里就涉及到swiper的两个特殊属性了，一个是hashnav，一个是initialSlide， 第一个是代表启用swiper的浏览器hash特性，如果设置hashnav：true，需要配合在每个swiper-slide上添加data-hash="slide1" data-hash="slide2" 这样当跳转进来的时候只要在链接后面加上对应的哈希，我们就可以直接定位到对应的tab下了，但是这里有一个问题，就是如果我们使用了这个属性，当我们在4个tab之间来回切换的话，会对应的修改浏览器的hash,并且每次切换都会新增window.location.history中的记录，这就导致了我们在切换过tab之后点击返回按钮无法返回当时进入tab页的上一个页面，所以其实这个属性在这里我是不可以用的，那咋办呢？ 额，其实我觉得吧，swiper提供的这个属性根本就不是给我们直接来使用的，并swiper不可能只有一个，而如果有多个的话，你切换完跳不回去这肯定是不行的，所以这个属性提供给我们就要看我们自己如何使用。
酱紫，在入口链接处依然加hash带入，进入页面获取URL的var hashString = window.location.hash 然后将hash中的值提取出来赋值给 initialSlide这个属性
initialSlide:hashNum || 0,（这样写如果有哈希就优先取哈希，如果没有就默认设置0 显示第一个tab）,这样就实现了如果带哈希进入页面可以直接定位到正确的tab下的需求，但是啊，产品的要求远远不止于此。。。。。在进入这个有4个swiper-slide的页面之后每个swiper-slide是一个ul列表，列表中的每个li都是可以点击进去另一个页面的，当你点击进去后再返回要求还能再返回当前tab,意思就是说，我们在切换四个tab的时候不能更改浏览器的记录但是有改变当前URL，所以用到的historyApI中的replace属性，来动态的替换URL中的哈希部分
onSlideChangeEnd: function (mySwiper) {
var newHash = '#slide' + secindex
var header = window.location.href.split('#')[0]
window.location.replace(header + newHash)
}
将替换的代码写在onSlideChangeEnd: 监听函数中，这样每次当tab做了切换之后，就会更改当前的URL的hash部分，然后当你点击进入其中一个li元素后再返回的时候就会返回一个带hash的URL，正好跟页面进来的时候获取哈希定位tab的方法对上了，从而实现了功能。
另外还有一个有关swiper-slide高度的，问题，因为四个swiper的内容高度是不固定的，有的内容可能多有的少，但是swiper默认是使所有的swiper-slide的高度都等于其中最大的那个的高度，这就导致了有些内容很少的tab下面出现很大的空白，这不是我们想要的，解决的办法也很简单，以为swiper给每个tab设置的类名是swiper-slide 而给当前激活tab会动态设置swiper-slide-active类名，所以我们只需要设置一个
.swiper-slide{
height: 10px;
}
.swiper-slide-active{
height: auto;
}
即可达到高度自适应了。
网友评论