当前位置:编程学习 > > 正文

vue实现列表向上滚动更新(vue实现列表无缝滚动)

时间:2021-10-20 08:51:56类别:编程学习

vue实现列表向上滚动更新

vue实现列表无缝滚动

本文实例为大家分享了vue实现列表无缝滚动的具体代码,供大家参考,具体内容如下

HTML部分代码

  • <template>
      <li id="box" class="wrapper">
        <li class="contain" id="con1" ref="con1" :class="{anim:animate==true}">
          <List
            v-for="(item,index) in cloudList"
            :key="index"
            :listData="item"
            :index="index"
            :date="date"
          ></List>
        </li>
      </li>
    </template>
    
  • List是单个列表组件,也可以替换成li。

    css部分代码

  • <style scoped>
    .wrapper {
      width: 96vw;
      height: 90vh;
      position: absolute;
      left: 2vw;
      top: 1rem;
      overflow: hidden;
    }
    .contain > li:nth-child(2n) {//这个样式是我这个项目所需,与无缝滚动无直接关系,可以忽略
      margin-left: 2vw;
    }
    .anim {
      transition: all 0.5s;
      margin-top: -7vh;
    }
    </style>
    
  • 我的List组件是设置了float:left的,所以id="con1"的li是没有高度的

    js部分代码

  • <script>
    import List from './List';
    export default {
      name: 'Contain',
      data () {
        return {
          cloudList: [],//数组用来存放列表数据
          date: '',//最新数据更新日期
          animate: false,
          time: 3000,//定时滚动的间隙时间
          setTimeout1: null,
          setInterval1: null
        };
      },
      components: {
        List
      },
      methods: {
        // 获取json数据并且更新日期
        getCloudListData () {
          const _this = this;
          _this.$api.getCloudListData().then(res => {
            _this.cloudList = res;
          });
          var newDate = new Date();
          _this.date = _this.dateFtt('yyyy-MM-dd hh:mm:ss', newDate);
        },
        // 日期格式化
        dateFtt (fmt, date) {
          var o = {
            'M+': date.getMonth() + 1, // 月份
            'd+': date.getDate(), // 日
            'h+': date.getHours(), // 小时
            'm+': date.getMinutes(), // 分
            's+': date.getSeconds(), // 秒
            'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
            S: date.getMilliseconds() // 毫秒
          };
          if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              (date.getFullYear() + '').substr(4 - RegExp.$1.length)
            );
          }
          for (var k in o) {
            if (new RegExp('(' + k + ')').test(fmt)) {
              fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length === 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
              );
            }
          }
          return fmt;
        },
        // 滚动
        scroll () {
          const _this = this;
          _this.animate = true;
          clearTimeout(_this.setTimeout1);
          _this.setTimeout1 = setTimeout(() => {
            var parent = document.getElementById('con1');
            var first = document.getElementById('con1').children[0];
            var second = document.getElementById('con1').children[1];
            parent.removeChild(first);
            parent.removeChild(second);
            parent.appendChild(first);
            parent.appendChild(second);
            _this.animate = false;
          }, 500);
        }
      },
      created () {
        const _this = this;
        _this.getCloudListData();
        //定时器每隔24小时更新一次数据
        setInterval(() => {
          _this.getCloudListData();
        }, 24 * 60 * 60 * 1000);
      },
      mounted () {
        const _this = this;
        var contain = document.getElementById('box');
        _this.setInterval1 = setInterval(_this.scroll, _this.time);
        var setInterval2 = null;
        // 鼠标移入滚动区域停止滚动
        contain.onmouseenter = function () {
          clearInterval(_this.setInterval1);
          var count = 0;
          // 如果鼠标超过十秒不动 就启动滚动
          setInterval2 = setInterval(function () {
            count++;
            if (count === 10) {
              _this.scroll();
              _this.setInterval1 = setInterval(_this.scroll, _this.time);
            }
          }, 1000);
          //鼠标一动就停止滚动并且计数count置为0
          contain.onmousemove = function () {
            count = 0;
            clearInterval(_this.setInterval1);
          };
        };
        // 鼠标移出滚动区域
        contain.onmouseleave = function () {
          clearInterval(setInterval2);
          clearInterval(_this.setInterval1);
          _this.scroll();
          _this.setInterval1 = setInterval(_this.scroll, _this.time);
        };
      }
    };
    </script>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐