vue3-seamless-scroll-modify
Version:
365 lines (340 loc) • 10.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3-seamless-scroll 例子</title>
<style>
.singleLine {
display: flex;
flex-direction: row;
height: 40px;
width: 100%;
overflow: hidden;
position: relative;
}
.singleLine span {
display: inline-block;
height: 20px;
margin-top: 12px;
white-space: nowrap;
}
.scroll {
display: inline-block;
height: 180px;
width: 390px;
margin: 0 25px;
overflow: hidden;
position: relative;
}
.scroll>div:first-child {
font-weight: bold;
color: red;
text-align: center;
}
.scroll>div:last-child {
margin-top: 15px;
height: 260px;
overflow: hidden;
}
.scroll .item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 0;
cursor: pointer;
}
</style>
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script src="../dist/vue3-seamless-scroll.js"></script>
</head>
<body>
<div id="app">
<div class="scroll">
<div>默认配置</div>
<vue3-seamless-scroll :list="list" :ease="ease">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>手动控制滚动</div>
<vue3-seamless-scroll :list="list" v-model="scroll">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>向下滚动</div>
<vue3-seamless-scroll :list="list" direction="down">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>向左滚动</div>
<vue3-seamless-scroll :list="list" direction="left">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>滚动速度</div>
<vue3-seamless-scroll :list="list" :step="3">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>鼠标悬停</div>
<vue3-seamless-scroll :list="list" hover>
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>单步停顿</div>
<vue3-seamless-scroll :list="list" :single-height="30">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>单行停顿时间</div>
<vue3-seamless-scroll :list="list" :single-height="30" :single-waitTime="3000">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>控制滚动，滚动{{count}}次</div>
<vue3-seamless-scroll :list="list" :count="count" @count="onCount">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>数组属性更新</div>
<vue3-seamless-scroll :list="list1">
<div class="item" v-for="(item, index) in list1" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>数组添加数据</div>
<vue3-seamless-scroll :list="list2">
<div class="item" v-for="(item, index) in list2" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>插槽方式使用</div>
<vue3-seamless-scroll :list="list">
<div class="item" v-for="(item, index) in list" :key="index" @click="onClick(index)">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
<template #html>
<div class="item" v-for="(item, index) in list" :key="index" @click="onClick(index)">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</template>
</vue3-seamless-scroll>
</div>
<div class="scroll" :style="{height: `${height}px`}">
<div>父级div高度改变</div>
<vue3-seamless-scroll :list="list" :ease="ease" ref="testRef">
<div class="item" v-for="(item, index) in list" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>未达到滚动条件直接显示原有的数据</div>
<vue3-seamless-scroll :list="list2" :ease="ease" :limit-scroll-num="7">
<div class="item" v-for="(item, index) in list2" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div class="scroll">
<div>异步数据触发滚动</div>
<vue3-seamless-scroll :list="syacList" :ease="ease">
<div class="item" v-for="(item, index) in syacList" :key="index">
<span>{{ item.title }}</span>
<span>{{ item.date }}</span>
</div>
</vue3-seamless-scroll>
</div>
<div>
<div style="font-weight: bold; color: red; text-align: center;">单行滚动</div>
<div class="singleLine">
<vue3-seamless-scroll :list="list" direction="left" :single-line="true">
<span v-for="(item, index) in list" :key="index">{{ item.title }}</span>
</vue3-seamless-scroll>
</div>
</div>
</div>
<script>
const listData = [
{
title: "Vue3.0 无缝滚动组件展示数据第1条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第2条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第3条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第4条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第5条",
date: Date.now(),
},
];
const listData1 = [
{
title: "Vue3.0 无缝滚动组件展示数据第1条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第2条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第3条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第4条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第5条",
date: Date.now(),
},
];
const listData2 = [
{
title: "Vue3.0 无缝滚动组件展示数据第1条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第2条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第3条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第4条",
date: Date.now(),
},
{
title: "Vue3.0 无缝滚动组件展示数据第5条",
date: Date.now(),
},
];
const vue3Composition = {
name: "example",
setup() {
const list = Vue.ref(listData);
const list1 = Vue.ref(listData1);
const list2 = Vue.ref(listData2);
const syacList = Vue.ref();
const scroll = Vue.ref(false);
const count = Vue.ref(1);
const ease = Vue.ref({
x1: 0,
y1: 0,
x2: 1,
y2: 1,
});
const height = Vue.ref(500);
let timer1;
Vue.onMounted(() => {
setTimeout(() => {
syacList.value = listData
height.value = 180;
}, 5000);
setInterval(() => {
list1.value[1].date = Date.now();
list1.value[3].date = Date.now();
}, 2000);
timer1 = setInterval(() => {
list2.value.push({
title: "Vue3.0 无缝滚动组件展示数据第 "+(list2.value.length+1)+" 条",
date: Date.now(),
});
if (list2.value.length === 9) {
clearInterval(timer1)
}
}, 2000);
setInterval(() => {
scroll.value = !scroll.value;
}, 3000);
});
function onCount(num) {
console.log(num);
if (num === count.value) {
setTimeout(() => {
count.value = num + 1;
}, 2000);
}
}
function onClick(index) {
alert(index);
}
return {
list,
list1,
list2,
syacList,
scroll,
count,
onCount,
onClick,
ease,
height,
}
}
};
const app = Vue.createApp(vue3Composition);
app.component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll);
app.mount("#app");
</script>
</body>
</html>