image.png
樓層效果如上圖所示：當(dāng)點擊左邊的索引表會跳到對應(yīng)的模塊，同時在滾動模塊的時候索引表也跟著變末捣。
這個主要是要利用iScroll的iscroll方法，實時獲取滾動的y軸數(shù)據(jù)，同時獲取每個索引對應(yīng)模塊的offsetTop的值捐名，保存到一個數(shù)組中，這里我是把這個方法放到watch里面的闹击，監(jiān)視數(shù)據(jù)是否有變化镶蹋，同時這里因為我們要獲取dom元素，所以要用$nextTick方法等待dom渲染好再獲取每個索引對應(yīng)模塊的高度赏半。
this.iscroll.on("scroll", function() {
fn(this.y);
});
topArtistsInfo(newValue) {
this.$nextTick(() => {
this.$refs.artistInfo.forEach((item, index) => {
this.indexTopOffset.push(item.offsetTop);
});
});
},
- y>=0時贺归， 說明是往上滑動的，可以設(shè)置index =0;
- y<0時断箫，遍歷數(shù)組indexTopOffset拂酣，如果-y值介于this.indexTopOffset[i]與this.indexTopOffset[i+1]的話，設(shè)置當(dāng)前索引值為i, 結(jié)束循環(huán)瑰枫。
3.y<0時踱葛，循環(huán)結(jié)束都沒有找到索引，則設(shè)置索引為this.indexTopOffset.length-1;
點擊索引表光坝，實現(xiàn)滾動到相應(yīng)的模塊就非常簡單了尸诽。根據(jù)當(dāng)前點擊索引的索引，找到this.indexTopOffset里面的scrollTop值盯另，然后利用iscroll里面的scrollTo方法滾動就可以了性含。
