您的位置:首页 > 游戏 > 手游 > vue 列表无限滚动列表,循环完自动切换tab

vue 列表无限滚动列表,循环完自动切换tab

2024/12/31 4:11:50 来源:https://blog.csdn.net/qq_61869009/article/details/141311390  浏览:    关键词:vue 列表无限滚动列表,循环完自动切换tab

记录一下大屏常用的滚动组件 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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com