记录一下大屏常用的滚动组件 vue-seamless-scroll 以及滚动完自动切换tab效果。
1.下载vue-seamless-scroll插件
npm install vue-seamless-scroll --save
2.页面使用
<vueSeamlessScroll @ScrollEnd="changeScroll" :data="nowlist" :class-option="defaultOption" class="fxsfdw_list"><div v-for="(item, index) in nowlist" :key="index"><div class="ttflex"><div class="items w1">{{ item.name }}</div><div class="items w2">{{ item.age }}</div><div class="items w3">{{ item.class }}</div></div></div>//循环完一次增加间隔<div style="height: 20px;"></div>
</vueSeamlessScroll>
<script>
import vueSeamlessScroll from "vue-seamless-scroll"
export default {components: {vueSeamlessScroll},
}
</script>3.监听列表滚动完毕执行定时任务
需要用到插件的一个方法 @ScrollEnd 官网没有介绍，这个方法是列表滚动完毕一次就会执行。
methods: {jumptype() {clearTimeout(this.timeOut)this.active = this.active + 1console.log(this.active);if (this.active == 3) {this.active = 0this.nowlist = this.userInfo.list1} else if (this.active == 1) {this.nowlist = this.userInfo.list2} else if (this.active == 2) {this.nowlist = this.userInfo.list3}if (this.nowlist.length < 4) {this.timeOut = setTimeout(() => {this.jumptype()}, 3000);}}, //监听列表滚动完毕changeScroll() {if (this.nowlist.length) {this.jumptype()}}},4.完整测试代码
注意滚动列表最好要定义高度，高度与你设置limitMoveNum 属性相关联否则列表滚动会有间隔！
<template><div><div class="tit_flex"><div class="tit_item" :class="active == index ? 'activeitem' : ''" v-for="(item, index) in classList" :key="index"@click="changeType(item, index)">{{ item.name }}</div></div><div class="content"><div class="tflex"><div class="items w1">姓名</div><div class="items w2">年龄</div><div class="items w3">班级</div></div><!-- 注意滚动列表最好要定义高度，高度与你设置limitMoveNum 属性相关联否则列表滚动会有间隔 !!!!!--><vueSeamlessScroll @ScrollEnd="changeScroll" :data="nowlist" :class-option="defaultOption" class="fxsfdw_list"><div v-for="(item, index) in nowlist" :key="index"><div class="ttflex"><div class="items w1">{{ item.name }}</div><div class="items w2">{{ item.age }}</div><div class="items w3">{{ item.class }}</div></div></div><div style="height: 20px;"></div></vueSeamlessScroll></div></div>
</template><script>
import vueSeamlessScroll from "vue-seamless-scroll"
export default {components: {vueSeamlessScroll},name: 'TestSa',data() {return {classList: [{id: 1,name: '一班'},{id: 2,name: '二班'},{id: 3,name: '三班'}],active: 0,userInfo: {list1: [{name: '张三',age: 20,class: '一班'},{name: '张三',age: 120,class: '一班'},{name: '李四',age: 9,class: '一班'},{name: '王五',age: 1,class: '一班'},{name: '二狗',age: 22,class: '一班'},{name: '阿萨德',age: 20,class: '一班'}],list2: [{name: '张三',age: 20,class: '二班'},{name: '张三',age: 120,class: '二班'},{name: '李四',age: 9,class: '二班'},{name: '王五',age: 1,class: '二班'},{name: '二狗',age: 22,class: '二班'},{name: '阿萨德',age: 20,class: '二班'}],list3: [{name: '张三',age: 20,class: '三班'},{name: '张三',age: 120,class: '三班'},{name: '李四',age: 9,class: '三班'},{name: '王五',age: 1,class: '三班'},{name: '二狗',age: 22,class: '三班'},{name: '阿萨德',age: 20,class: '三班'}]},nowlist: [],timeOut: null}},computed: {defaultOption() {return {step: 0.4, // 数值越大速度滚动越快hoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)limitMoveNum: 4 // 多少条开始滚动}},},mounted() {this.nowlist = this.userInfo.list1},methods: {changeType(item, index) {console.log(item, index);this.active = indexif (index == 0) {this.nowlist = this.userInfo.list1} else if (index == 1) {this.nowlist = this.userInfo.list2} else {this.nowlist = this.userInfo.list3}},jumptype() {clearTimeout(this.timeOut)this.active = this.active + 1console.log(this.active);if (this.active == 3) {this.active = 0this.nowlist = this.userInfo.list1} else if (this.active == 1) {this.nowlist = this.userInfo.list2} else if (this.active == 2) {this.nowlist = this.userInfo.list3}if (this.nowlist.length < 4) {this.timeOut = setTimeout(() => {this.jumptype()}, 3000);}},changeScroll() {if (this.nowlist.length) {this.jumptype()}}},
}
</script>
<style scoped>
.tit_flex {width: 300px;display: flex;justify-content: space-between;border: 1px solid #eee;height: 38px;align-items: center;
}.tit_item {width: 30%;cursor: pointer;
}.activeitem {color: red;
}.content {width: 300px;border: 1px solid #eee;
}.tflex {display: flex;justify-content: space-between;background: #eee;
}.tflex .items {}.w1 {width: 30%;
}.w2 {width: 30%;
}.w3 {width: 30%;
}.fxsfdw_list {overflow: hidden;height: 200px;
}.ttflex {display: flex;justify-content: space-between;padding: 6px 4px;
}
</style>