vue/js实现页面自动往上滑动效果
作者:紫菀檀ss
这篇文章主要为大家详细介绍了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] }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。