快捷導(dǎo)航

vue/js實現(xiàn)頁面自動往上滑動效果

更新時間：2022年04月06日 12:20:48 作者：紫菀檀ss

這篇文章主要為大家詳細(xì)介紹了vue/js實現(xiàn)頁面自動往上滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue/js實現(xiàn)頁面自動往上滑動的具體代碼，供大家參考，具體內(nèi)容如下

最近做的新項目中要求讓看不見的內(nèi)容自動往上滑動一定的距離，使之可以看到，下面我來分享一下。

效果圖：

我主要是使用 scrollTop 來做的往上滑動的功能，使用 animate 函數(shù)使之有一定的動畫效果。有一個注意點就是要滾動的元素是父級標(biāo)簽，比如我下面列舉的代碼：id=“scrollbody” 是放在父級標(biāo)簽?zāi)抢锏?，它包裹著多?class=“item” ，如果還是不懂的話，就看使用了v-for在哪個標(biāo)簽使用，然后我們就獲取它的父標(biāo)簽即可。

下面是我的相關(guān)代碼，大家可以參考：

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">數(shù)量</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 藍(lán)色邊框 -->
? ? ? ? ? ? ? <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(); // 在這里調(diào)用滑動的方法
? ? },
? ? getTop() {
? ? ? $('#scrollbody').animate = "";
? ? ? let tops = $('#itemID' + this.inds).offset();
? ? ? let tps = tops['top']; ?// 獲取當(dāng)前框距離頂部的距離
? ? ? let height = $('#itemID' + this.inds).outerHeight(); ?// 獲取當(dāng)前框的高度
? ? ??
? ? ? console.log('滑動的高度--->', height * (this.inds - (indss - 1)))
? ? ? if (tps > this.boHeights) { ?// 如何當(dāng)前框的距離頂部的距離大于某個值（該值可以自動動態(tài)設(shè)置），那么就讓它往上滑動
? ? ? ? console.log('-------------->', tps);
? ? ? ? $('#scrollbody').animate({
? ? ? ? ? scrollTop: height * (this.inds*2) ?// 注意：這里的數(shù)值一定要動態(tài)變化，不然只會滑動一次而已
? ? ? ? }, 300 /*scroll實現(xiàn)定位滾動*/ ); /*讓整個頁面可以滾動*/
? ? ? }
? ? },
? },
? mounted() {
? ? console.log('proList------->111', this.proList);
? ?this.newList ?= [...this.detailsInfo.settlmentList]
? },
}

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

您可能感興趣的文章: