最近做了個(gè)用swiper切換四個(gè)tab無(wú)線滾動(dòng)的需求，之前沒(méi)用過(guò)swiper蛔钙，使用過(guò)程中遇到一些問(wèn)題去件，解決完后還是很好用的，記錄下就缆。
<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">患病風(fēng)險(xiǎn)</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 + '人已測(cè)試'"></span></div>
</li>
<#--tuijian-->
</ul>
頁(yè)面結(jié)構(gòu)大概是帖渠，頂部一個(gè)fixed定位的tab用來(lái)充當(dāng)pageination的作用，每個(gè)span下面用偽元素來(lái)做小藍(lán)條竭宰，綁定active 來(lái)切換顯示空郊，當(dāng)頁(yè)面進(jìn)來(lái)mounted之后發(fā)起四個(gè)請(qǐng)求分別將請(qǐng)求回來(lái)的數(shù)據(jù)灌滿四個(gè)ul(分別對(duì)應(yīng)4個(gè)swiper-slide) ,然后就是需求中有兩個(gè)swiper-slide是有直接的入口鏈接的，從鏈接處點(diǎn)擊進(jìn)來(lái)要求直接定位到當(dāng)前tab下切揭，這里就涉及到swiper的兩個(gè)特殊屬性了狞甚，一個(gè)是hashnav，一個(gè)是initialSlide廓旬， 第一個(gè)是代表啟用swiper的瀏覽器hash特性哼审，如果設(shè)置hashnav：true，需要配合在每個(gè)swiper-slide上添加data-hash="slide1" data-hash="slide2" 這樣當(dāng)跳轉(zhuǎn)進(jìn)來(lái)的時(shí)候只要在鏈接后面加上對(duì)應(yīng)的哈希，我們就可以直接定位到對(duì)應(yīng)的tab下了棺蛛，但是這里有一個(gè)問(wèn)題怔蚌，就是如果我們使用了這個(gè)屬性，當(dāng)我們?cè)?個(gè)tab之間來(lái)回切換的話旁赊，會(huì)對(duì)應(yīng)的修改瀏覽器的hash,并且每次切換都會(huì)新增window.location.history中的記錄桦踊，這就導(dǎo)致了我們?cè)谇袚Q過(guò)tab之后點(diǎn)擊返回按鈕無(wú)法返回當(dāng)時(shí)進(jìn)入tab頁(yè)的上一個(gè)頁(yè)面，所以其實(shí)這個(gè)屬性在這里我是不可以用的终畅，那咋辦呢籍胯？ 額，其實(shí)我覺得吧离福，swiper提供的這個(gè)屬性根本就不是給我們直接來(lái)使用的杖狼，并swiper不可能只有一個(gè)，而如果有多個(gè)的話妖爷，你切換完跳不回去這肯定是不行的蝶涩，所以這個(gè)屬性提供給我們就要看我們自己如何使用。
醬紫絮识，在入口鏈接處依然加hash帶入绿聘，進(jìn)入頁(yè)面獲取URL的var hashString = window.location.hash 然后將hash中的值提取出來(lái)賦值給 initialSlide這個(gè)屬性
initialSlide:hashNum || 0,（這樣寫如果有哈希就優(yōu)先取哈希，如果沒(méi)有就默認(rèn)設(shè)置0 顯示第一個(gè)tab）,這樣就實(shí)現(xiàn)了如果帶哈希進(jìn)入頁(yè)面可以直接定位到正確的tab下的需求次舌，但是啊熄攘，產(chǎn)品的要求遠(yuǎn)遠(yuǎn)不止于此。彼念。挪圾。。逐沙。在進(jìn)入這個(gè)有4個(gè)swiper-slide的頁(yè)面之后每個(gè)swiper-slide是一個(gè)ul列表哲思，列表中的每個(gè)li都是可以點(diǎn)擊進(jìn)去另一個(gè)頁(yè)面的，當(dāng)你點(diǎn)擊進(jìn)去后再返回要求還能再返回當(dāng)前tab,意思就是說(shuō)酱吝，我們?cè)谇袚Q四個(gè)tab的時(shí)候不能更改瀏覽器的記錄但是有改變當(dāng)前URL也殖，所以用到的historyApI中的replace屬性，來(lái)動(dòng)態(tài)的替換URL中的哈希部分
onSlideChangeEnd: function (mySwiper) {
var newHash = '#slide' + secindex
var header = window.location.href.split('#')[0]
window.location.replace(header + newHash)
}
將替換的代碼寫在onSlideChangeEnd: 監(jiān)聽函數(shù)中务热，這樣每次當(dāng)tab做了切換之后，就會(huì)更改當(dāng)前的URL的hash部分己儒，然后當(dāng)你點(diǎn)擊進(jìn)入其中一個(gè)li元素后再返回的時(shí)候就會(huì)返回一個(gè)帶hash的URL崎岂，正好跟頁(yè)面進(jìn)來(lái)的時(shí)候獲取哈希定位tab的方法對(duì)上了，從而實(shí)現(xiàn)了功能闪湾。
另外還有一個(gè)有關(guān)swiper-slide高度的冲甘，問(wèn)題，因?yàn)樗膫€(gè)swiper的內(nèi)容高度是不固定的，有的內(nèi)容可能多有的少江醇，但是swiper默認(rèn)是使所有的swiper-slide的高度都等于其中最大的那個(gè)的高度濒憋，這就導(dǎo)致了有些內(nèi)容很少的tab下面出現(xiàn)很大的空白，這不是我們想要的陶夜，解決的辦法也很簡(jiǎn)單凛驮，以為swiper給每個(gè)tab設(shè)置的類名是swiper-slide 而給當(dāng)前激活tab會(huì)動(dòng)態(tài)設(shè)置swiper-slide-active類名，所以我們只需要設(shè)置一個(gè)
.swiper-slide{
height: 10px;
}
.swiper-slide-active{
height: auto;
}
即可達(dá)到高度自適應(yīng)了条辟。
