快捷導(dǎo)航

vue/js實(shí)現(xiàn)頁面自動(dòng)往上滑動(dòng)效果

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

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

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

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

效果圖：

我主要是使用 scrollTop 來做的往上滑動(dòng)的功能，使用 animate 函數(shù)使之有一定的動(dòng)畫效果。有一個(gè)注意點(diǎn)就是要滾動(dòng)的元素是父級(jí)標(biāo)簽，比如我下面列舉的代碼：id=“scrollbody” 是放在父級(jí)標(biāo)簽?zāi)抢锏?，它包裹著多?xiàng) class=“item” ，如果還是不懂的話，就看使用了v-for在哪個(gè)標(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">價(jià)格</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: '填價(jià)格',
? ? ? newList: [], // 合并填單價(jià)
? ? ? 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)用滑動(dòng)的方法
? ? },
? ? 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('滑動(dòng)的高度--->', height * (this.inds - (indss - 1)))
? ? ? if (tps > this.boHeights) { ?// 如何當(dāng)前框的距離頂部的距離大于某個(gè)值（該值可以自動(dòng)動(dòng)態(tài)設(shè)置），那么就讓它往上滑動(dòng)
? ? ? ? console.log('-------------->', tps);
? ? ? ? $('#scrollbody').animate({
? ? ? ? ? scrollTop: height * (this.inds*2) ?// 注意：這里的數(shù)值一定要?jiǎng)討B(tài)變化，不然只會(huì)滑動(dòng)一次而已
? ? ? ? }, 300 /*scroll實(shí)現(xiàn)定位滾動(dòng)*/ ); /*讓整個(gè)頁面可以滾動(dòng)*/
? ? ? }
? ? },
? },
? mounted() {
? ? console.log('proList------->111', this.proList);
? ?this.newList ?= [...this.detailsInfo.settlmentList]
? },
}

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

您可能感興趣的文章: