快捷導航

vue中使用jquery滑動到頁面底部的實現(xiàn)方式

更新時間：2022年12月01日 09:51:36 作者：最初都是小白

這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用jquery滑動到頁面底部

期望點擊按鈕或其他操作時可以滾動到底部

方法

?// 滑動到底部
? ? scrollToBottom(){
? ? ? this.$nextTick(() => {
? ? ? ? ? ?//要滑動的高度= 當前dom的滑動高度 - 當前窗口可視區(qū)域高度
? ? ? ? ? ?var height = $("#scrollBox")[0].scrollHeight - $(window).height();
? ? ? ? ? ? $("#scrollBox").scrollTop(height); // 滑動
? ? ? });
? ? }

完整代碼

<template>
? <div id="scrollBox"> //有滾動的dom
? ?? ?<div @click="scrollToBottom">點擊滑動到底部</div>
? ? <div style="height:1500px;background:pink;">內(nèi)容高1500</div>
? </div>
</template>

<script>
import $ from "jquery";
export default {
?data(){
? ? return{}
?},
?methods:{
? ? // 滑動到底部
? ? scrollToBottom(){
? ? ? this.$nextTick(() => {
? ? ? ? ? ?//要滑動的高度= 當前dom的滑動高度 - 當前窗口可視區(qū)域高度
? ? ? ? ? ?var height = $("#scrollBox")[0].scrollHeight - $(window).height();
? ? ? ? ? ? $("#scrollBox").scrollTop(height); // 滑動
? ? ? });
? ? }
? }
}
</script>

<style>
? #scrollBox { //有滾動的dom
?? ?height: 100vh;
? ? overflow-y: auto;
? }
</style>

vue使用jQuery，實現(xiàn)頁面到達指定位置時實現(xiàn)animate動畫

vue中使用jquery

1、首先下載

npm install jquery -s

2、在項目根目錄下的build目錄下找到webpack.base.conf.js文件，在開頭使用以下代碼引入webpack，因為該文件默認沒有引用。

var webpack = require('webpack')

3、最后在build目錄下的webpack.base.conf.js文件里找到module.exports，添加以下代碼

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],

具體位置如圖：

在這里插入圖片描述

記得重啟項目哦

實現(xiàn)頁面到達指定位置時實現(xiàn)animate動畫

1、使用動畫要先下載動畫

npm install animate.css --save

2、在main.js中引入

import animated from 'animate.css/animate.css'
Vue.use(animated);

3、在需要做動畫的地方

<template>
? <div>
? ? <div class="head"><div>
? </div>
</template><script>
export default {
? ?data(){
? ? ?return {
? ? ?}
? },
? mounted(){
? ? $(window).scroll(function(){
? ? //這里100代表你要動畫的元素離最頂層的距離，console.log一下就知道了。
? ? ? ?if($(window).scrollTop() > 100){
? ? ? ? ? $('.head').addClass('animate__animated animate__bounce')
? ? ? ?}else{
? ? ? ? ? $('.head').removeClass('animate__animated animate__bounce')
? ? ? ?}
? ? })
}
</script>

附上查看動畫的網(wǎng)址：https://animate.style/