vue/js实现页面自动往上滑动效果

本文实例为大家分享了vue/js实现页面自动往上滑动的具体代码，供大家参考，具体内容如下

最近做的新项目中要求让看不见的内容自动往上滑动一定的距离，使之可以看到，下面我来分享一下。

效果图：

我主要是使用 scrollTop 来做的往上滑动的功能，使用 animate 函数使之有一定的动画效果。有一个注意点就是要滚动的元素是父级标签，比如我下面列举的代码：id=“scrollbody” 是放在父级标签那里的，它包裹着多项 class=“item” ，如果还是不懂的话，就看使用了v-for在哪个标签使用，然后我们就获取它的父标签即可。

下面是我的相关代码，大家可以参考：

1、html代码

<div class="bodyblockcons" :style="'padding-top:'+heightHeader+'px'">
   <div class="content">
    <div class="title" id="titles">
     <span class="name">名称</span>
     <span class="num">数量</span>
     <span class="price plt">价格</span>
    </div>
    <div class="item-content">
     <div class="ct-content" id="scrollbody" :style="ShowKey'height:'+boHeights+'px;':''" @click="enterNull">
      <div
       class="item"
       v-for="(item,index) in newList"
       :key="index+item"
       @click.stop="enterNull"
       :id="'itemID'+index"
      >
       <div class="name">{{item.Product}}</div>
       <!--红色字体样式 colorRed -->
       <div class="num">
        <div class="nums">
         {{item.numAccount}}
         <span
          :class="(item.ProductUnit==item.StockProductUnit)'':'colorRed'"
         >{{item.ProductUnit}}</span>
        </div>
        <div class="row">({{item.barAccount}}条)</div>
       </div>
       <!-- colorFD 蓝色边框 -->
       <div
        :class="(indid==item.id)'price colorFD':'price'"
        @click.stop="enterItem(item,index,$event)"
       >
        <!-- pribgc 背景色（全选） -->
        <span
         :class="!isTab&&(indid==item.id)&&!item.state&&isClear'pri pribgc':'pri'"
        >{{item.UnitPrice}}</span>
        <span class="icon" v-if="!isTab&&(indid==item.id)&&!item.state&&!isClear"></span>
       </div>
      </div>
     </div>
    </div>
  </div>
</div>

2、js文件

import $ from '../../../../static/js/jquery-3.3.1.min.js';
import {
 mapState
} from "vuex";
let timer;
export default {
 data() {
  return {
   name: '填价格',
   newList: [], // 合并填单价
   keyHeight: 0,
   boHeights: 0,
  }
 },
 computed: {
  marginTop() {
   let height = 0;
   let result = (1.877 + 1.621 + 0.426 * 2 - 2.5);

   let restheight = hotcss.rem2px(result, window.innerWidth);
   console.log('marginTop---------------->', restheight);
   return restheight;
  },
  ...mapState({
   detailsInfo: state => state.detailsInfo.all,
  }),
 },
 methods: {
  // 确定按钮，只是用于定位到下一行
  makesure() {
   console.log('makesure-->val', this.isNull);
   console.log('保存。。。。');
   let _this = this;
   _this.inputVal = '';
   _this.inds = _this.inds + 1;
   _this.indid = _this.indid + 1;
   if (_this.inds < _this.newList.length - 1 || _this.inds == _this.newList.length - 1) {
    _this.getTop(); // 在这里调用滑动的方法
  },
  getTop() {
   $('#scrollbody').animate = "";
   let tops = $('#itemID' + this.inds).offset();
   let tps = tops['top']; // 获取当前框距离顶部的距离
   let height = $('#itemID' + this.inds).outerHeight(); // 获取当前框的高度
  
   console.log('滑动的高度--->', height * (this.inds - (indss - 1)))
   if (tps > this.boHeights) { // 如何当前框的距离顶部的距离大于某个值（该值可以自动动态设置），那么就让它往上滑动
    console.log('-------------->', tps);
    $('#scrollbody').animate({
     scrollTop: height * (this.inds*2) // 注意：这里的数值一定要动态变化，不然只会滑动一次而已
    }, 300 /*scroll实现定位滚动*/ ); /*让整个页面可以滚动*/
   }
  },
 },
 mounted() {
  console.log('proList------->111', this.proList);
 this.newList = [...this.detailsInfo.settlmentList]
 },
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。