运用与数据大屏等需要无缝衔接的功能效果
安装
npm 安装 :
npm install vue-seamless-scroll --save
yarn 安装:
yarn add vue-seamless-scroll
全局注册:
import Vue from "vue";
import scroll from "vue-seamless-scroll";
Vue.use(scroll);
局部注册:
注意这里分 vue2 和 veu3 注册
vue2:
import vueSeamless from "vue-seamless-scroll";
export default {
components: {
vueSeamless,
},
};
使用:
使用时给盒子增加宽高
<vueSeamless :data="listData" class="gaotext" :class-option="classOption">
<view class="" v-for="item in listData" :key="item.id">{{ item.name }} </view>
</vueSeamless>
export default {
data() {
listData:[], // 后端数据
classOption:{
step: 0.5, // 数值越大速度越快
direction: 1, // 往上滚动
limitMoveNum: 1, // 1条数据开启无缝滚动
}
}
}