vue-$nextTick及安装jq

最新推荐文章于 2024-09-13 22:57:39 发布

MoonMoonLee

最新推荐文章于 2024-09-13 22:57:39 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/qq_39241421/article/details/88342798

版权

在页面加载过程中，由于元素加载时间差异，js操作DOM时可能遇到未完全加载的问题，导致获取页面高度等操作失败。本文介绍了如何利用Vue的$nextTick确保DOM更新后执行操作，并分享了在Vue项目中安装和使用jQuery的步骤，包括npm安装、webpack配置和在main.js中的引入。

摘要由CSDN通过智能技术生成

一个页面中页面元素有图片、文字、外部文件链接，这些加载时候都会占据时间，js在做操作时，需要等所有元素都加载完进行操作，这个问题做项目时没有考虑到，导致在做dom操作时，获取页面高度，查找了很长时间的问题才解决。

这里使用了jq 操作dom 楼层滚动定位，添加一点安装步骤

1、npm install jquery --save-dev

2、build.js 中 webpack.base.dev.js 添加 var webpack = require('webpack')；

module.exports中添加新对象配置

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

]

3、mian.js 中引入 import $ from 'jquery'

<template>
    <div class="page-container">
        <div class="box-row top-tit">
            <template v-for="(item,index) in tabBarTit">
                <div :key="index" class="tit-to" :class='{active: thisActive == index}' @click='tabBarActive(index)'>{
  {item.tex}}</div>
            </template>
        </div>
        <div class="floor">
            <div class="banner">
                <img class="" src='../../assets/image/aboutus/banner.png' />
            </div>
            <div class="who conten-tit ">

                <div class="h1">

                    我们是谁
                </div>
                <div class="h2">
                    WHO
                </div>
                <div class="intro">
                    <div>
                        贝登医械购是南京贝登医疗股份有限公司针对诊所客户量身定制的一站式耗材和设备采购平台。通过精选300多个国内外知名医疗器械品牌，进行年度签约、产品直采和集中备货，医械购为全国中小诊所、门诊客户提供专业、高效、低成本的一站式耗材产品采购服务。</div>
                    <div id="id1"></div>
                </div>
            </div>
        </div>

        <div class="conten-tit floor our-advantage-box">
            <div class="h1">
                我们的优势
            </div>
            <div class="h2">
                ADVANTAGE
            </div>
            <div class="intro our-advtage">
                <template v-for="(item,index) in advatages">
                    <div class="content" :key="index">
                        <div class="why-download-img">
                            <img class="" :src="item.url" />
                        </div>
                        <div class="why-download-text box-col">
                            <div class="why-tip">{
  {item.tip}}</div>
                            <div class="why-download-tit">{
  {item.title}}</div>
                            <div class="why-download-cont" decode='true'>{
  {item.content1}}</div>
                            <div class="why-download-cont" decode='true'>{
  {item.content2}}</div>
                        </div>
                    </div>
                </template>

            </div>
            <div id="id2"></div>
        </div>
        <!--我们的文化-->
        <div class="conten-tit  culture-conten floor">
            <div class="culture-tit">
                <div class="h1">
                    我们的文化
                </div>
                <div class="h2">
                    CULTURE
                </div>
            </div>
            <div class="intro ">
                <template v-for="(items,index ) in cultureContent">
                    <div class='box-row culture-box' :class='items.lastChild? "pb0" : ""' :key="index">
                        <div class="culture">
                            <img class="" :src='items.url' />
                        </div>
                        <div class="box-col advantage-tip">
                            <div class="advantage-tip1">{
  {items.title}}</di