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

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

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

效果图：

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

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

1、html代码

      

        

          名称
          数量
          价格
        
        

          

            

              
{{item.Product}}
              
              

                

                  {{item.numAccount}}
                  {{item.ProductUnit}}
                
                
({{item.barAccount}}条)
              
              
              

                
                {{item.UnitPrice}}
                
              
            
          
        
    

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]
  },
}

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