我想启用到Swiper轮播中的图片的深层链接。 “ hashNavigation”组件似乎是为此目的而专门设计的，但是我看不到如何使其工作。当启用它并在幻灯片中提供data-hash属性时，它将用我提供的哈希值替换整个路径。显然，这使它对于没有在主页上的所有刷卡器都无效。我如何将其散列到路径的[[append哈希而不是替换它？这是我的实例化它的代码：
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
mousewheel: true,
hashNavigation: {
watchState: true,
replaceState: true,
},
autoplay: {delay: 4444}
},
swiper = new Swiper(vis, swiperOpts);
和标记示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/"> <link rel="preconnect" href="//cdnjs.cloudflare.com"> <link rel="preconnect" href="//unpkg.com"> <link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> </head> <body class="visio"> <main> <div class="swiper-container" id="vis"> <ul class="swiper-wrapper"> <li class="swiper-slide" data-hash="235" style=""> <p>slide one</p></li> <li class="swiper-slide" data-hash="228" style=""> <p>slide two</p></li> <li class="swiper-slide" data-hash="224" style=""> <p>slide tre</p></li> <li class="swiper-slide" data-hash="227" style=""> <p>slide for</p></li> <li class="swiper-slide" data-hash="236" style=""> <p>slide fiv</p></li> </ul> </div> </main> <script src="//unpkg.com/swiper/js/swiper.min.js"></script> </body></html>
以下是我看到的URL的一些示例：
domain.com/visio/sol224domain.com/#224let initIDX = 0;
if(window.location.hash){
let lmnt = document.querySelector('[data-hash="'+window.location.hash.substring(1)+'"]'),
i = 0;
while((lmnt = lmnt.previousSibling) != null) if(lmnt.nodeType == 1) ++i;
initIDX = i;
}
var vis = document.getElementById('vis'),
swiperOpts = {
loop: true,
slidesPerView: 1,
initialSlide: initIDX,
on:{
slideChangeTransitionEnd: function(){
history.replaceState(null, null,
window.location.pathname + '#' + this.slides[this.activeIndex].dataset.hash);
}
}
},
swiper = new Swiper(vis, swiperOpts);
这对我有用。