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

客官°小女子只卖身不卖艺 2021-08-14 01:50 719阅读 0赞

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

### 效果图： ###

![在这里插入图片描述][20200102144258781.gif]

##### 我主要是使用 **scrollTop** 来做的往上滑动的功能，使用 **animate** 函数使之有一定的动画效果。 #####

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

#### 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>
                  
                  <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>
                  
                  <div
                    :class="(indid==item.id)?'price colorFD':'price'"
                    @click.stop="enterItem(item,index,$event)"
                  >
                    
                    <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]
      },
    }

[20200102144258781.gif]: /images/20210813/d35c3dbeb0844733aca64f20859ac8c5.png