触屏端图标滑动slider组件点击后消失问题求助

核心故障原因 #

• 偏移量计算逻辑错误：setPositionByIndex 方法默认使用整屏宽度 window.innerWidth 作为单页滑动步长，但你的场景是小图标横向滑动，单个slide宽度远小于屏幕宽度，点击组件触发 touchend 事件后会调用该方法，直接将整个slider容器移出可视区域，表现为组件消失。
• 无效Swiper初始化：代码末尾初始化了Swiper实例，但HTML中不存在对应的 .swiper-container-2 节点，会抛出JS运行错误，可能干扰正常事件逻辑。
• CSS缺失必要属性：.slider-container 未设置横向溢出隐藏，滑动时布局会出现异常。

修复代码 #

修改JS逻辑 #

把原来的setPositionByIndex方法替换为以下代码，用单个slide的实际宽度作为滑动步长：

// 先获取单个slide的占位宽度，要包含间距，数值可以按需调整
const slideWidth = slides[0].offsetWidth + 22
function setPositionByIndex() {
  currentTranslate = currentIndex * -slideWidth
  // 增加边界限制，避免滑到空白区域
  const maxTranslate = 0
  const minTranslate = -(slides.length * slideWidth - window.innerWidth)
  currentTranslate = Math.max(Math.min(currentTranslate, maxTranslate), minTranslate)
  prevTranslate = currentTranslate
  setSliderPosition()
}

如果不需要按图标整格吸附，也可以直接修改touchend方法，保留当前滑动位置即可：

function touchEnd() {
  cancelAnimationFrame(animationID)
  isDragging = false
  // 不需要整格滑动可以直接注释以下snap逻辑
  // const movedBy = currentTranslate - prevTranslate
  // if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1
  // if (movedBy > 100 && currentIndex > 0) currentIndex -= 1
  // setPositionByIndex()
  prevTranslate = currentTranslate
  slider.classList.remove('grabbing')
}

补充CSS #

给.slider-container增加必要样式：

.slider-container{
  overflow-x: hidden;
  width: 100%;
}

删除无效代码 #

删掉末尾不需要的Swiper初始化代码，避免报错：

// 完整删除以下代码
var mySwiper2 = new Swiper ('.swiper-container-2', {
  init: true,
  direction: 'horizontal',
  loop: true,
  preloadImages: true,
  slidesPerView: 'auto'
})

内容的提问来源于stack exchange，提问作者BeneBeneBene