滚动条 ​

<template>
  <el-scrollbar height="25rem">
    <p v-for="item in activities" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
</template>

<script setup lang="ts">
const activities = Array.from(
  { length: 16 },
  (_, index) => `物流进度 ${index + 1}：包裹节点已更新`
)
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin: 0.625rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in quickActions" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
const quickActions = [
  '待付款',
  '待发货',
  '待收货',
  '退款中',
  '常用地址',
  '优惠券',
  '发票信息',
  '客服中心',
] as const
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
  width: fit-content;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  min-height: 3rem;
  margin: 0.625rem;
  text-align: center;
  border-radius: 0.75rem;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>

<template>
  <div class="scrollbar-actions">
    <el-button @click="add">新增节点</el-button>
    <el-button @click="onDelete">删除节点</el-button>
  </div>
  <el-scrollbar max-height="25rem">
    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
      配送步骤 {{ item }}
    </p>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(3)

const add = () => {
  count.value++
}
const onDelete = () => {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<style scoped>
.scrollbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin: 0.625rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

<template>
  <el-scrollbar ref="scrollbarRef" height="25rem" always @scroll="scroll">
    <div ref="innerRef">
      <p v-for="item in steps" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>

  <el-slider
    v-model="value"
    :max="max"
    :format-tooltip="formatTooltip"
    @input="inputSlider"
  />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

import type { ScrollbarInstance } from 'element-plus-mobile'

type Arrayable<T> = T | T[]

const max = ref(0)
const value = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<ScrollbarInstance>()

onMounted(() => {
  max.value = Math.max(
    (innerRef.value?.clientHeight ?? 0) -
      (scrollbarRef.value?.wrapRef?.clientHeight ?? 0),
    0
  )
})

const inputSlider = (value: Arrayable<number>) => {
  scrollbarRef.value!.setScrollTop(value as number)
}
const scroll = ({ scrollTop }: { scrollTop: number }) => {
  value.value = scrollTop
}
const formatTooltip = (value: number) => `滚动偏移 ${value}`

const steps = Array.from(
  { length: 18 },
  (_, index) => `配送进度 ${index + 1}：等待仓库确认出库`
)
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin: 0.625rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-slider {
  margin-top: 1.25rem;
}
</style>

<template>
  <el-scrollbar height="25rem" @end-reached="loadMore">
    <p v-for="item in num" :key="item" class="scrollbar-demo-item">
      推荐内容 {{ item }}
    </p>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ScrollbarDirection } from 'element-plus-mobile'

const num = ref(30)

const loadMore = (direction: ScrollbarDirection) => {
  if (direction === 'bottom') {
    num.value += 5
  }
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin: 0.625rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>