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

文章展示了如何在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
        }
    },
}
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用 Vue.js 中的 v-for 指令来渲染列表,并结合 v-scroll 指令来实现列表自动滚动。同时,你可以通过定时器或者 WebSocket 等方式实时更新数据。 下面是一个简单的示例: ```html <template> <div class="list-container" v-scroll="scrollToBottom"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { list: [], // 列表数据 // 假设你有一种方式可以实时获取数据更新 }; }, methods: { scrollToBottom() { // 滚动到底部 const container = document.querySelector('.list-container'); container.scrollTop = container.scrollHeight; }, // 假设你有一种方式可以实时获取数据更新 // 例如,每隔一段时间调用 updateData 方法更新数据 updateData() { // 假设这里通过异步请求获取最新的数据 // 并将新数据追加到 list 数组中 const newData = await fetchData(); this.list = [...this.list, ...newData]; }, }, mounted() { // 假设你在组件挂载后开始更新数据 setInterval(this.updateData, 5000); // 每隔5秒更新一次数据 }, }; </script> <style> .list-container { height: 300px; overflow-y: auto; } </style> ``` 在上面的示例中,v-scroll 指令绑定了 scrollToBottom 方法,当列表容器滚动时,会触发该方法,实现自动滚动到底部。通过定时器或者其他方式,你可以实时更新数据并将新数据追加到 list 数组中,从而实现列表的实时更新。 希望对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

么心么肺

你的鼓励将是我学习的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值