103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<!-- <div ref="scrollContainer" class="scroll-container" style="height: 90%"> -->
|
||
|
|
<!-- <div
|
||
|
|
ref="scrollContent"
|
||
|
|
class="scroll-content"
|
||
|
|
:style="{ transform: `translateY(${topPosition}px)`, transition: `transform ${transitionDuration}ms linear` }"
|
||
|
|
>
|
||
|
|
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||
|
|
<div class="list-item-content">
|
||
|
|
<div class="list-item-l">{{ item }}</div>
|
||
|
|
<div class="list-item-r">
|
||
|
|
{{ '0' + (index + 1) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<div class="demo" style="height: 90%">
|
||
|
|
<vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
|
||
|
|
<!-- <ul class="ui-wrap">
|
||
|
|
<li class="li-item" v-for="(item, i) of list" :key="i">
|
||
|
|
<p>{{ item.title }}</p>
|
||
|
|
</li>
|
||
|
|
</ul> -->
|
||
|
|
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||
|
|
<div class="list-item-content">
|
||
|
|
<div class="list-item-l">{{ item.title }}</div>
|
||
|
|
<div class="list-item-r">
|
||
|
|
{{ '0' + (index + 1) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</vue3ScrollSeamless>
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
|
||
|
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
||
|
|
const props = defineProps({
|
||
|
|
items: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
let list = reactive(props.items);
|
||
|
|
|
||
|
|
const classOptions = {
|
||
|
|
singleHeight: 48,
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.demo {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.scroll-wrap {
|
||
|
|
height: 200px;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
||
|
|
line-height: 36px;
|
||
|
|
.list-item-content {
|
||
|
|
display: inline-flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-around;
|
||
|
|
.list-item-l,
|
||
|
|
.list-item-r {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.list-item-l {
|
||
|
|
width: calc(100% - 50px);
|
||
|
|
padding-right: 8px;
|
||
|
|
}
|
||
|
|
.list-item-r {
|
||
|
|
width: 50px;
|
||
|
|
text-align: right;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ui-wrap {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.li-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|