vue3中無法使用 vue-seamless-scroll，作者還沒有發(fā)布vue3版本的
github issues中有提到一個(gè)解決方法，是某個(gè)作者推薦的封裝方法，但是我更傾向于使用js版的seamless-scroll作為臨時(shí)替代方案。
npm install seamscroll --save
SeamlessScroll.vue: 可以直接拷貝
<template>
<div class="scroll-wrap">
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { init } from 'seamscroll/src';
console.log('8888', init);
export default defineComponent({
name: 'seamlessScroll',
components: {},
props: {
id: {
type: String,
default: '',
},
classOption: {
type: Object,
default: {
step: 1, //速度
hoverStop: true, //鼠標(biāo)停止
direction: 1, //0 下 1 上 2 左 3 右
},
},
},
setup(props) {
const data = reactive({});
const methods = {
checkChange(val: number) {},
};
onMounted(() => {
setTimeout(() => {
console.log(props.id);
const config = Object.assign(
{},
{
dom: document.getElementById(props.id),
},
props.classOption,
);
init(config);
}, 100);
});
return {
data,
...methods,
};
},
});
</script>
<style lang="scss" scoped>
.scroll-wrap {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
</style>
使用：
<SeamlessScroll
class="scroll-content"
:class="{ scrollHeight: !needTitle }"
:class-option="classOption"
:id="data.id"
>
<ul class="dl-scroll" :id="data.id">
<li>自己寫</li>
</ul>
</SeamlessScroll>
注意：如果多個(gè)滾動(dòng) data.id 需要保證唯一性鳖轰，可以用Math.random()等方式去生成
