z-base-ui

Appearance

ZHScroll 横向滚动 ​

由鼠标滚轮的纵向滚动来控制横向滚动。

基础效果 ​

添加 width 属性为容器指定一个宽度即可实现效果，尝试将鼠标移至图片，并滚动滚轮。

<template>
  <z-h-scroll width="858px">
    <div class="item">
      <img src="https://images.pexels.com/photos/547115/pexels-photo-547115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/1619319/pexels-photo-1619319.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/10651589/pexels-photo-10651589.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/9989705/pexels-photo-9989705.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
  </z-h-scroll>
</template>

<style scoped>
.item, .item img {
  width: 858px;
  height: 375px;
}
</style>

触底回弹 ​

添加 rebound 属性开启触底回弹。

<template>
  <z-h-scroll width="858px" rebound>
    <div class="item">
      <img src="https://images.pexels.com/photos/547115/pexels-photo-547115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/1619319/pexels-photo-1619319.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/10651589/pexels-photo-10651589.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
    <div class="item">
      <img src="https://images.pexels.com/photos/9989705/pexels-photo-9989705.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
    </div>
  </z-h-scroll>
</template>

<style scoped>
.item, .item img {
  width: 300px;
  height: 200px;
}
</style>

hscroll 属性 ​

属性名说明类型默认值
width 必填容器宽度，请避免使用百分比string | number300px
rebound触底回弹booleanfalse
delay延迟n秒后回弹，单位毫秒number300