2020年1月份去了南京，返回工作城市后，慢慢的從外界接收到“新冠肺炎”的消息，1月份2月份的一段日子，每個人都在等待疫情好轉的那一刻，也是由於疫情原因，春節過后，無法回公司辦公，維持了大概1個半月的在家辦公時間，感覺到在家辦公，比較大的問題其實是溝通的問題，能夠電話/語音溝通說明白的事情，絕對不要浪費時間去發文字描述。
切入今天的正題 ：
需求背景：實現tab切換 ，並且每個tab內容區域底部還存在一個固定定位的按鈕，在tab所在內容區域實現手勢切換tab ，tab切換時內容存在切換動效，並且tab切換后回到原初始位置
需求分析：如果在功能上只是tab切換，無其他交互，可以按照常用的方式進行實現，但是由於交互動效，我們可以選擇使用vue的第三方插件vue-awesome-swiper進行實現
需求主要點：
a.按鈕在頁面底部固定
b.左滑切換tab
c.tab切換時左滑右滑的動態效果
d.tab切換后，記錄當前滾動高度，切換回來時回到原來位置
進入實現
1.引用
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
2.配置使用
swiperOption: {
antoplay: false,
},
3.在vue中template使用（此處略過）
此時實現了需求點b、c，也能夠左右切換 但是存在一個問題，就是 swiperSlide的兩個元素，內容高度是等高度的，如果兩個tab的高度不一致，導致高度較低的內容高度存在底部過多空白的問題，出現了一個新的問題" m :兩個swiperSlide的內容高度不一致時，如何保證低內容高度不留空白" ，
思考空白問題：利用js去控制swiper盒子的高度，當切換過來時候，將swiper的高度設置成當前盒子的高度。
this.styleHeight ='min-height:'+clinetHeight+'px!important;'+'height:'+ document.getElementById('myplan'+index).scrollHeight+'px';
此時高度適配問題也解決了 至於為什么會有min-height 則是因為 如果內容區域少於當前屏幕的可視區域，本身的高度是根據內容的高度一樣的，所以可能存在內容區域上部分可進行手滑切換tab，而下部分不能進行手滑切換tab ,
實現需求d 也是比較簡單了，利用一個object去記錄滑走的時候當前tab的高度，然后切換過來的時候，進醒取值和賦值即可
that.gloabalScrollHeight[recordIndex] = document.getElementById("my-wiper").scrollTop
document.getElementById("my-wiper").scrollTop=that.gloabalScrollHeight[that.activeIndex];
swiper滑動的過程中可能遇到問題，就是swiper為滾動完畢，就執行了高度的滾動，此時回出現，高度滾到指定值失效的問題，借助進行解決。
that.$nextTick(function(){
document.getElementById("my-wiper").scrollTop=that.gloabalScrollHeight[that.activeIndex];
})
***************另外一種方式******************
就是swiper自己提供了一個屬性autoHeight:true,設置了這個屬性后，我們的高度就會根據內容的高度進行自適應，很好的解決了高度不適應的問題，
雖然達到了高度自適應，但是存在如果內容區域不滿屏，下方空白區域部分無法進行左滑效果，因此關於高度，還是需要在切換時候進行實時計算高度和賦值。
4.對於需求a,頁面滑動時候固定在底部的按鈕跟着當前的內容進行左滑和右滑
思考良久，去實現該點
4.1 首先將定位的按鈕放置在swiperSilde中，按鈕固定底部使用fixed ,當頁面渲染完后發現 ，為什么fixed的按鈕在內容區域的下方，而不是定位屏幕的下方，瀏覽器端看了swiper的移動方式
即 定位按鈕的父元素包含了transform屬性導致了fixed元素失去了元素的原有定位，因此按鈕的定位效果就和absolute或無定位一樣的
找到解決方式 ： 按鈕使用absolute定位，父元素的swiper進行relative定位，
頁面初始化時候，按鈕的距離頂部的高度（top 定位值）= 屏幕可視區域高度 -距離底部的高度
當頁面滾動的時候： 按鈕距離頂步的高度（top定位值） = 屏幕可視區域高度 + 頁面scrollTop(滑動上的高度)-距離底部的高度
當到這里，其實就已經實現了 按鈕可根據tab的左滑而進行左滑 還沒有結束，你挖了這個坑的土填滿另外一個坑，那肯定有一個坑的是少土的 （驚喜總是那么的意料之中）
頁面滾動是一個不可控制的變量，滾動的速度，滾動的高度，都是不可控制的，我們通過計算頁面的滾動高度等進行定位，呵呵呵呵呵呵 ，那定位元素的按鈕肯定也是一個不可控制的高度，按鈕在不可控制、未知的動作下，必然會讓人驚嘆：“抖動”
“抖動”雖然是需求上未提到的點，但是真的讓惹難以接受，因此改變了按鈕交互方式，俗稱“砍掉這部分需求，用其他的方式實現交互”
---終於 迎來了按鈕的新交互 ：就是當手滑tab內容區域的時候，按鈕隱藏，手滑動結束后，按鈕展示；
感謝swiper內的on方法，應用touchmove的方式進行控制按鈕的隱藏和顯示 progress的變量是當前滑動的距離距離
touchMove:function(event){
//避免上下移動時按鈕消失
if(this.progress !==1 && this.progress !==0){
that.showAddButton0 = false;
that.showAddButton1 = false;
}
} ,
touchEnd:function(event){
//this.progress 參數進度條按照寬度來進行的計算比例
if((this.activeIndex == 0 && this.progress < 0.50) || (this.activeIndex == 1 && this.progress > 0.50)){
that.showAddButton0 = (this.activeIndex ==0 ? true : false);
that.showAddButton1 = (this.activeIndex ==1 ? true : false);
}
} ,
注意點：左滑右滑時候隱藏按鈕，但是上滑下滑不隱藏按鈕，而swiper上滑和下滑的時候 progress也是存在值的 0||1
今天梳理了下遇到的問題以及解決的方式，突然腦子里思路清晰了許多
end：最后總結下vue-awesome-swiper的注意點
- swiper的高度按照當前內容高度最高的進行賦值，低高度的內容下方存在空白問題 ,可進行js賦值height或者設置autoheight屬性未true
- 設置autoheight屬性 當頁面高度不足滿屏幕時候，內容區域下方空白部分不可進行手滑動，可設置min-height
- swiper內部設置的fixed定位元素將失效
- 切換tab進行高度賦值時候需要借助 that.$nextTick
開發過程中需要考慮很多細節的點 ，不僅僅是完成需求功能，追求prefect !