vue3 实现一个列表水平居中的同时，可以左右滑动？

Question

vue3 实现一个列表水平居中的同时，可以左右滑动？通过添加display: flex;justify-content: center; 实现了prize-pools-box中元素的居中，但是现在元素无法向左滚动了，vue3 想实现一个列表水平居中的同时，可以左右滑动？ 应该怎么改呢？这个功能需要适配低版本浏览器和低版本手机，有什么兼容的方法吗？

<div class="prize-pools-box">
            <div class="prize-item" :key="index" v-for="(item, index) in 9"></div>
</div>

  .prize-pools-box {
      margin-top: 27px;
      width: 100vw;
      height: 182px;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      justify-content: center;
      .prize-item {
        width: 173px;
        height: 182px;
        margin-right: 12px;
}
}

Answer 1

<template>
    <div class="prize-pools-container">
        <div class="prize-pools-box">
            <div v-for="(item, index) in items" :key="index" class="prize-pool-item">
                {{ item }}
            </div>
        </div>
    </div>
</template>
<script setup>
const items= ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7']

</script>
<style>

.prize-pools-container {
    display: flex;
    justify-content: center;
    overflow-x: hidden; /* 防止容器本身滚动 */
}

.prize-pools-box {
    display: flex;
    overflow-x: auto; /* 允许子元素水平滚动 */
    scroll-snap-type: x mandatory; /* 启用滚动捕捉 */
    padding: 0 16px; /* 两端留出一些空间，防止滚动时边缘卡顿 */
    -webkit-overflow-scrolling: touch; /* 使 iOS 设备上的滚动更流畅 */
}

.prize-pool-item {
    flex-shrink: 0; /* 防止子元素缩小 */
    width: 100px; /* 示例宽度，可以根据需要调整 */
    height: 100px; /* 示例高度，可以根据需要调整 */
    margin: 0 8px; /* 子元素之间的间距 */
    background-color: #f0f0f0; /* 示例背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; /* 启用滚动捕捉 */
}
</style>

效果如下

Answer 2

<template>
  <div class="outer-container">
    <div class="inner-container" ref="scrollContainer">
      <div class="prize-pools-box">
        <div 
          class="prize-item" 
          v-for="(item, index) in 9" 
          :key="index"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const scrollContainer = ref(null)
let startX = 0
let scrollLeft = 0
let isDown = false

const handleMouseDown = (e) => {
  isDown = true
  startX = e.pageX - scrollContainer.value.offsetLeft
  scrollLeft = scrollContainer.value.scrollLeft
}

const handleMouseUp = () => {
  isDown = false
}

const handleMouseMove = (e) => {
  if (!isDown) return
  e.preventDefault()
  const x = e.pageX - scrollContainer.value.offsetLeft
  const walk = (x - startX) * 2
  scrollContainer.value.scrollLeft = scrollLeft - walk
}

onMounted(() => {
  const el = scrollContainer.value
  if (el) {
    el.style.transform = 'translateZ(0)'
    el.style.willChange = 'transform'

    el.addEventListener('mousedown', handleMouseDown)
    el.addEventListener('mouseleave', handleMouseUp)
    el.addEventListener('mouseup', handleMouseUp)
    el.addEventListener('mousemove', handleMouseMove)
  }
})

onUnmounted(() => {
  const el = scrollContainer.value
  if (el) {
    el.removeEventListener('mousedown', handleMouseDown)
    el.removeEventListener('mouseleave', handleMouseUp)
    el.removeEventListener('mouseup', handleMouseUp)
    el.removeEventListener('mousemove', handleMouseMove)
  }
})
</script>

<style lang="scss" scoped>
.outer-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.inner-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* 增强 iOS 滚动体验 */
  margin: 0 auto;
  /* 隐藏滚动条但保持功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

.prize-pools-box {
  margin-top: 27px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 calc(50% - 86.5px); /* 半个容器宽度减去半个item宽度 */
  
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
  
  .prize-item {
    flex-shrink: 0; 
    width: 173px;
    height: 182px;
    margin-right: 12px;
    background-color: #f0f0f0; 
    
    &:last-child {
      margin-right: 0;
    }
  }
}

@media (hover: none) and (pointer: coarse) {
  .inner-container {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

@supports (-webkit-touch-callout: none) {
  .inner-container {
    /* iOS Safari specific styles */
    -webkit-overflow-scrolling: touch;
  }
}
</style>

还可以定制参数：

<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: () => Array(9).fill({})
  },
  itemWidth: {
    type: Number,
    default: 173
  },
  itemHeight: {
    type: Number,
    default: 182
  },
  itemGap: {
    type: Number,
    default: 12
  }
})
</script>

Answer 3

以下是解决你在 Vue 3 中实现列表水平居中且可左右滑动的问题的方案：

解决思路：

1. 使用 display: flex 和 justify-content: center 实现水平居中。
2. 为了实现左右滑动，使用 overflow-x: auto 让内容在水平方向溢出时可以滚动。
3. 为了保证元素能向左滚动，可能需要添加足够的宽度，确保内容可以超出容器宽度。
4. 考虑兼容性问题，使用 display: -webkit-box 等兼容旧版浏览器的属性。

修改方案：

<template>
  <div class="prize-pools-box">
    <div class="prize-item" :key="index" v-for="(item, index) in 9"></div>
  </div>
</template>

<style scoped>
.prize-pools-box {
  margin-top: 27px;
  width: 100vw;
  height: 182px;
  display: -webkit-box; /* 兼容旧版浏览器 */
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  -webkit-box-pack: center; /* 兼容旧版浏览器 */
  justify-content: center;
  /* 以下代码保证内部元素有足够的宽度可滚动 */
  flex-wrap: nowrap;
  white-space: nowrap;
}
.prize-item {
  width: 173px;
  height: 182px;
  margin-right: 12px;
  display: inline-block; /* 确保元素在一行显示 */
}
</style>

代码解释：

• display: -webkit-box; 和 -webkit-box-pack: center;：这些属性是为了兼容旧版的 WebKit 内核浏览器（如旧版的 Safari 和低版本的 iOS 系统上的浏览器）。
• overflow-x: auto;：当元素内容在水平方向溢出容器时，显示滚动条，允许用户滚动查看。
• flex-wrap: nowrap;：确保元素不换行，保持在同一行。
• white-space: nowrap;：防止元素内的文本换行，确保元素在水平方向上保持一行。
• display: inline-block;：让 .prize-item 元素可以在一行中水平排列，并且能够设置宽度和间距。

注意事项：

• 对于低版本手机，主要考虑使用 -webkit- 前缀的属性进行兼容。
• 你可能需要测试不同的低版本浏览器和手机，如 iOS 系统中的 Safari 旧版本、Android 系统中的旧版浏览器，以确保兼容性。

• 如果你想在 Vue 3 组件中更好地管理样式，可以使用 Vue 的 :style 绑定，根据不同的情况动态添加样式，如下：

  <template>
  <div :class="['prize-pools-box', isOldBrowser? 'old-browser' : '']">
    <div class="prize-item" :key="index" v-for="(item, index) in 9"></div>
  </div>
  </template>
  
  <script>
  export default {
  data() {
    return {
      isOldBrowser: false
    };
  },
  mounted() {
    // 假设这里有一个检查是否是旧浏览器的函数 checkOldBrowser()
    this.isOldBrowser = checkOldBrowser();
  }
  };
  </script>
  
  <style scoped>
  .prize-pools-box {
  margin-top: 27px;
  width: 100vw;
  height: 182px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  }
  .prize-item {
  width: 173px;
  height: 182px;
  margin-right: 12px;
  display: inline-block;
  }
  .old-browser {
  display: -webkit-box;
  -webkit-box-pack: center;
  }
  </style>

通过上述的修改，你可以在 Vue 3 中实现一个列表的水平居中，同时可以左右滑动，并且在一定程度上兼容低版本浏览器和低版本手机。当然，为了更好的兼容性，你可能需要使用一些 JavaScript 库，如 Modernizr 来检测浏览器功能，根据检测结果应用不同的样式或行为。

需要注意的是，对于低版本的浏览器和手机，你可能无法实现完全一致的效果，因为不同的浏览器对 CSS 属性的支持不同。但通过上述的兼容属性添加和动态样式，可以最大程度上保证基本功能的实现。

如果你还有其他问题，欢迎继续向我提问。