欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)列表無縫滾動

 更新時間:2021年06月28日 10:38:45   作者:tall羊  
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)列表無縫滾動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)列表無縫滾動的具體代碼,供大家參考,具體內(nèi)容如下

HTML部分代碼

<template>
  <div id="box" class="wrapper">
    <div 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>
    </div>
  </div>
</template>

List是單個列表組件,也可以替換成li。

css部分代碼

<style scoped>
.wrapper {
  width: 96vw;
  height: 90vh;
  position: absolute;
  left: 2vw;
  top: 1rem;
  overflow: hidden;
}
.contain > div:nth-child(2n) {//這個樣式是我這個項目所需,與無縫滾動無直接關(guān)系,可以忽略
  margin-left: 2vw;
}
.anim {
  transition: all 0.5s;
  margin-top: -7vh;
}
</style>

我的List組件是設(shè)置了float:left的,所以id="con1"的div是沒有高度的

js部分代碼

<script>
import List from './List';
export default {
  name: 'Contain',
  data () {
    return {
      cloudList: [],//數(shù)組用來存放列表數(shù)據(jù)
      date: '',//最新數(shù)據(jù)更新日期
      animate: false,
      time: 3000,//定時滾動的間隙時間
      setTimeout1: null,
      setInterval1: null
    };
  },
  components: {
    List
  },
  methods: {
    // 獲取json數(shù)據(jù)并且更新日期
    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小時更新一次數(shù)據(jù)
    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;
    // 鼠標(biāo)移入滾動區(qū)域停止?jié)L動
    contain.onmouseenter = function () {
      clearInterval(_this.setInterval1);
      var count = 0;
      // 如果鼠標(biāo)超過十秒不動 就啟動滾動
      setInterval2 = setInterval(function () {
        count++;
        if (count === 10) {
          _this.scroll();
          _this.setInterval1 = setInterval(_this.scroll, _this.time);
        }
      }, 1000);
      //鼠標(biāo)一動就停止?jié)L動并且計數(shù)count置為0
      contain.onmousemove = function () {
        count = 0;
        clearInterval(_this.setInterval1);
      };
    };
    // 鼠標(biāo)移出滾動區(qū)域
    contain.onmouseleave = function () {
      clearInterval(setInterval2);
      clearInterval(_this.setInterval1);
      _this.scroll();
      _this.setInterval1 = setInterval(_this.scroll, _this.time);
    };
  }
};
</script>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

    這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Vue結(jié)合ElementUI上傳Base64編碼后的圖片實例

    Vue結(jié)合ElementUI上傳Base64編碼后的圖片實例

    這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • OpenLayer基于vue的封裝使用教程

    OpenLayer基于vue的封裝使用教程

    這篇文章主要介紹了OpenLayer基于vue的封裝使用,openlayer使用的版本是"^6.4.3",引入了mapbox的樣式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-10-10
  • ElementUI表單驗證validate和validateField的使用及區(qū)別

    ElementUI表單驗證validate和validateField的使用及區(qū)別

    Element-UI作為前端框架,最常使用到的就是表單驗證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗證validate和validateField的使用及區(qū)別,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • vant-ui框架的一個bug(解決切換后onload不觸發(fā))

    vant-ui框架的一個bug(解決切換后onload不觸發(fā))

    這篇文章主要介紹了vant-ui框架的一個bug(解決切換后onload不觸發(fā)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • VueJs使用Amaze ui調(diào)整列表和內(nèi)容頁面

    VueJs使用Amaze ui調(diào)整列表和內(nèi)容頁面

    這篇文章主要介紹了VueJs 填坑日記之使用Amaze ui調(diào)整列表和內(nèi)容頁面,需要的朋友可以參考下
    2017-11-11
  • 基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn)

    基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn)

    這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • Vue3獲取DOM節(jié)點的3種方式實例

    Vue3獲取DOM節(jié)點的3種方式實例

    Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下
    2023-02-02
  • Vue-router 中hash模式和history模式的區(qū)別

    Vue-router 中hash模式和history模式的區(qū)別

    這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 通過npm引用的vue組件使用詳解

    通過npm引用的vue組件使用詳解

    本文章通過實現(xiàn)一個vue-dialog的彈出層組件,然后附加說明如果發(fā)布此包到npm,且能被其他項目使用。本文給大家介紹的非常詳細(xì),需要的的朋友參考下
    2017-03-03

最新評論