快捷導(dǎo)航

vue中使用jquery滑動(dòng)到頁(yè)面底部的實(shí)現(xiàn)方式

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

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

使用jquery滑動(dòng)到頁(yè)面底部

期望點(diǎn)擊按鈕或其他操作時(shí)可以滾動(dòng)到底部

方法

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

完整代碼

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

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

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

vue使用jQuery，實(shí)現(xiàn)頁(yè)面到達(dá)指定位置時(shí)實(shí)現(xiàn)animate動(dòng)畫(huà)

vue中使用jquery

1、首先下載

npm install jquery -s

2、在項(xiàng)目根目錄下的build目錄下找到webpack.base.conf.js文件，在開(kāi)頭使用以下代碼引入webpack，因?yàn)樵撐募J(rèn)沒(méi)有引用。

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àng)目哦

實(shí)現(xiàn)頁(yè)面到達(dá)指定位置時(shí)實(shí)現(xiàn)animate動(dòng)畫(huà)

1、使用動(dòng)畫(huà)要先下載動(dòng)畫(huà)

npm install animate.css --save

2、在main.js中引入

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

3、在需要做動(dòng)畫(huà)的地方

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

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