vue实现列表数据自动翻页和自动滚动

么心么肺

已于 2024-04-08 16:52:39 修改

阅读量1k

点赞数 2

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2023-07-20 10:46:24 首次发布

本文链接：https://blog.csdn.net/weixin_41545048/article/details/131824722

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js应用中实现实时数据加载和自动翻页功能，以及利用vue-seamless-scroll插件创建无缝滚动列表。代码示例包括数据获取、定时器处理以及组件绑定。

摘要由CSDN通过智能技术生成

自动翻页

<div>
   <ul style="list-style: none">
      <li class="data-title" style="width: 20%;">地区</li>
      <li class="data-title" style="width: 20%;">名称</li>
      <li class="data-title" style="width: 30%;">开始时间</li>
      <li class="data-title" style="width: 30%;">结束时间</li>
   </ul>
   <div v-for="item in list[listIndex]">
      <ul style="list-style: none">
         <li class="data-info" style="width: 20%;font-size: 16px;">
           {{ item.area}}
         </li>
         <li class="data-info" style="width: 20%;font-size: 16px;">
           {{ item.name}}
         </li>
         <li class="data-info" style="width: 30%;font-size: 16px;">
           {{ item.startTime }}
         </li>
         <li class="data-info" style="width: 30%;font-size: 16px;">
           {{ item.endTime }}
         </li>
       </ul>
   </div>
</div>

export default {
    data () {
        return {
            list:[],
            listIndex:0
        },
    },
    created(){
        this.getData()
        this.timer = setInterval(this.changeDate, 5000)
    },
    methods:{
        getData(){
            axios.request({
                method: 'post',
                url: '/xxx/xxx/xxx',
                data: {}
            }).then(res =>{
                this.list = res.data.list
            })
        },
        changeDate(){
            this.listIndex=(this.listIndex===(this.list.length - 1))? 0 : (me.listIndex+1)
        }
    },
    beforeDestroy () {
        clearInterval(this.timer)
    }
}

自动滚动

//该方式需要借助插件vue-seamless-scroll，需要安装使用
npm install vue-seamless-scroll --save

// main.js
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.component(vueSeamlessScroll)

<div>
    <div class="box-style">
        <div class="table-title">
            <span>ID</span>
            <span>长</span>
            <span>宽</span>
            <span>高</span>
            <span>时间</span>
         </div>
         <VueSeamlessScroll :class-option="SeamlessScrollOption"
             :data="list" class="table-list">
             <ul>
                 <li
                      v-for="(item, index) in list" :key="index"
                      :class="{ 'img-active': active === index }"
                      @click="handleClick($event, item, index)"
                 >
                      <span v-text="item.id"></span>
                      <span v-text="item.length"></span>
                      <span v-text="item.width"></span>
                      <span v-text="item.height"></span>
                      <span v-text="item.time"></span>
                 </li>
             </ul>
        </VueSeamlessScroll>
    </div>
</div>

export default {
    data () {
        return {
            list:[],
            active:null,
            tableLiHeight: 60,
            SeamlessScrollOption: {
              singleHeight: this.tableLiHeight, // 单步运动停止的高度
              limitMoveNum: 1, // 无缝滚动的数据量
              waitTime: 3000, // 单步停止等待时间(默认值 1000ms)
              switchDelay: 400, // 单步切换的动画时间(ms)。
              isSingleRemUnit: false, // singleHeight and singleWidth 是否开启 rem 度量
            },
        },
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            axios.request({
                method: 'post',
                url: '/xxx/xxx/xxx',
                data: {}
            }).then(res =>{
                this.list = res.data.list
            })
        },
        handleClick(event, item, index){
            this.active = index
        }
    },
}