javascript - HTML CSS 顶部拖动条幻灯片以显示更多信息

Question

所以我想要一个出现在屏幕底部的栏，当点击它时，它会向上滑动以显示一些更详细的信息，然后可以再次点击它以向下滑动。很难解释！

这是一张展示它的图片。单击此按钮后，我想将其向上滑动并在屏幕上填充有关您的订单的信息（例如，价格的来源）（例如，价格来自何处），然后可以再次单击以向下滑动。

我不确定这叫什么，因此我很难找到类似的东西！因此，非常感谢此类链接。如果可以的话请帮忙。谢谢你。

标签： javascripthtmlcss

Answer 1

这种类型的组件通常出现在移动应用程序中。

它可以使用 vanilla javascript 在 Web 应用程序中实现。您所需要的只是一个绝对定位的元素，单击该元素会向上移动。

const slider = document.querySelector('.slider');
const sliderHead = document.querySelector('.slider .head');

slider.addEventListener('click', () => {
  slider.classList.toggle('slideUp');
});

// initially, only show slider head from the bottom of the page
function setSliderPosition(slider) {
  let sliderPaddingTop = parseInt(window.getComputedStyle(slider).paddingTop);
  const offset = slider.offsetHeight - sliderHead.offsetHeight - sliderPaddingTop;
  slider.style.bottom = `-${offset}px`;
}

setSliderPosition(slider);

p, h2 { margin: 0; }
body { overflow: hidden; background: #eee; }

.slider,
.slider::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}

.slider {
  background: #fff;
  padding: 20px;
  width: 80%;
  cursor: pointer;
  transition: bottom 0.4s ease;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.slideUp {
  bottom: 0 !important;
}

.slider::before {
  content: '';
  background: #eee;
  width: 75px;
  height: 5px;
  top: 8px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 15px;
}

<div class="slider">
  <div class="head">
    <h2>Your Order</h2>
    <span>$123</span>
  </div>
  <div class="moreInfo">
  <h2>
   More Information:
  </h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
</div>