vue-$nextTick及安装jq

最新推荐文章于 2024-09-13 22:57:39 发布
原创最新推荐文章于 2024-09-13 22:57:39 发布 · 316 阅读
CC 4.0 BY-SA版权
在页面加载过程中，由于元素加载时间差异，js操作DOM时可能遇到未完全加载的问题，导致获取页面高度等操作失败。本文介绍了如何利用Vue的$nextTick确保DOM更新后执行操作，并分享了在Vue项目中安装和使用jQuery的步骤，包括npm安装、webpack配置和在main.js中的引入。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
一个页面中页面元素有图片、文字、外部文件链接，这些加载时候都会占据时间，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}}</div>
                            <div class="advantage-tip2" decode='true' v-html="items.content"></div>
                        </div>
                    </div>
                </template>

            </div>
            <div id="id3"></div>

        </div>
        <!--我们的文化-->
        <!--贝登大事记-->
        <div class="conten-tit floor">

            <div class="h1">
                贝登大事记
            </div>
            <div class="h2">
                MEMORABILIA
            </div>
            <div class="intro big-event-box">
                <template v-for='(items,index) in bigEvents'>
                    <div class='box-row culture-box' :key='index'>
                        <div class="big-event box-col">
                            <div class="big-event-circle"></div>
                            <div :class='items.lastChild ? "big-event-line" : ""'></div>
                        </div>
                        <div class="box-col advantage-tip">
                            <div class="advantage-tip1"> {{items.dates}}</div>
                            <div class="advantage-tip2">{{items.whatEvent}}</div>
                        </div>
                    </div>
                </template>
            </div>
            <div id="id4"></div>

        </div>
        <!--贝登大事记-->
        <!--联系方式-->
        <div class="conten-tit  culture-conten linkbg floor">
            <div class="culture-tit">
                <div class="h1">
                    联系方式
                </div>
                <div class="h2">
                    CONTACT
                </div>
            </div>
            <div class="conect-us-box">
                <div class="conect-us">
                    <div class="conect-us-tit">全国统一服务热线</div>
                    <div class="box-row tel-number-box">
                        <div class="box-col" bindtap='call' data-tel='4006-999-569'>
                            <div class="tel-number">
                                4006-999-569
                            </div>
                            <div class="tel-number-icon box-row">
                                <div class="hc-icon icon-call">
                                </div>
                                <div class="call-us">
                                    呼叫
                                </div>
                            </div>
                        </div>
                        <div class="box-col" bindtap='call' data-tel='025-66857288'>
                            <div class="tel-number">
                                025-66857288
                            </div>
                            <div class="tel-number-icon box-row">
                                <div class="hc-icon icon-call">
                                </div>
                                <div class=" call-us">
                                    呼叫
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="conect-us conect-us-20">
                    <div class="conect-us-tit">服务时间</div>
                    <div class="conect-us-content">周一至周五 8:30 – 17:45</div>
                </div>
                <div class="conect-us conect-us-20">
                    <div class="conect-us-tit">传真</div>
                    <div class="conect-us-content">025-68538235</div>
                </div>
                <div class="conect-us conect-us-20">
                    <div class="conect-us-tit">邮箱</div>
                    <div class="conect-us-content">sales@vedeng.com</div>
                </div>
                <div class="conect-us conect-us-20 conect-us-address">
                    <div class="conect-us-tit">地址</div>
                    <div class="conect-us-content box-row ">
                        <div class="address">江苏南京白下高新技术产业园永顺路2号斯坦德电子商务大厦北楼3楼</div>
                        <div class="hc-icon icon-address" bindtap="intoMap" type="primary"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--贝登大事记-->
    </div>
</template>
<script>
    export default {
        name: 'aboutUsApp',
        data() {
            return {
                tabBarTit: [{ 'tex': '我们是谁' }, { 'tex': '优势' }, { 'tex': '文化' }, { 'tex': '大事记' }, { 'tex': '联系方式' }],
                cultureContent: [
                    { 'title': '使命', 'url': require('../../assets/image/aboutus/shiming.png'), 'content': '让医疗器械采购更简单', 'lastChild': false },
                    { 'title': '愿景', 'url': require('../../assets/image/aboutus/yuanjing.png'), 'content': '成为全球最大的电商平台', 'lastChild': false },
                    { 'title': '价值观', 'url': require('../../assets/image/aboutus/jiazhiguan.png'), 'content': '客户第一  团队合作 <br/>使命必达  诚信  激情  创新', 'lastChild': false },
                    { 'title': '使命必达', 'url': require('../../assets/image/aboutus/bida.png'), 'content': '忠于目标  勇担责任  绝不推诿', 'lastChild': true }
                ],
                advatages: [
                    { 'tip': '产品全', 'url': require('../../assets/image/aboutus/pic1.png'), 'title': '全面的产品线', 'content1': '精选100+国内外知名医疗器械生产厂家品牌', 'content2': '提供30000+覆盖各大科室的器械和耗材产品' },
                    { 'tip': '价格低', 'url': require('../../assets/image/aboutus/pic2.png'), 'title': '实惠的电商价格', 'content1': '年度签约品牌厂家，产品直接采购和集中备货，价格更优', 'content2': '100%原厂正品货源，买的放心，用的安心' },
                    { 'tip': '服务好', 'url': require('../../assets/image/aboutus/pic3.png'), 'title': '周到的服务体验', 'content1': '线上客服即时响应，实时解决您的困惑与问题', 'content2': '售后团队半小时内响应，提供服务保障，售后无忧' },
                    { 'tip': '放心买', 'url': require('../../assets/image/aboutus/pic4.png'), 'title': '安全的支付环境', 'content1': '支持银行打款、支付宝、微信等多种支付方式，担保交易', 'content2': '合同制采购交易，合规经营，支付安全有保障' },
                ],
                bigEvents: [
                    { 'dates': '2010年4月', 'whatEvent': '贝登成立，打造工业品综合电商平台', 'lastChild': true },
                    { 'dates': '2011年4月', 'whatEvent': '获得天使投资人数百万投资', 'lastChild': true },
                    { 'dates': '2014年6月', 'whatEvent': '转型进入医疗器械流通领域', 'lastChild': true },
                    { 'dates': '2015年6月', 'whatEvent': '获得医疗产业基金分享投资和鹏瑞投资3000万Pre-A轮融资', 'lastChild': true },
                    { 'dates': '2015年10月', 'whatEvent': '与中国最大的医疗器械生产商迈瑞达成电商战略合作', 'lastChild': true },
                    { 'dates': '2016年11月', 'whatEvent': '获得中卫基金、东方富海和普华资本6500万A轮融资', 'lastChild': true },
                    { 'dates': '2017年7月', 'whatEvent': '布局线下服务，设立4个子公司', 'lastChild': true },
                    { 'dates': '2017年12月', 'whatEvent': '与迈瑞达成更深入的战略合作', 'lastChild': true },
                    { 'dates': '2018年4月', 'whatEvent': '入选“2018南京第一批关注独角兽企业和瞪羚企业”', 'lastChild': true },
                    { 'dates': '2018年5月', 'whatEvent': '完成1亿元A+轮融资，打造医疗器械流通产业链“新链主”', 'lastChild': false }
                ],
                thisActive: 0,

            }
        },
        mounted() {
            this.$nextTick(function () {
                this.handleScroll();
            })

        },
        methods: {
            tabBarActive(i) {
                this.thisActive = i;
            },
            handleScroll() {
                var posArr = [];
                var heightArr = [];
                var flag = true //设置标识。防止出现跑马灯
                var _this = this;
                var $floors = $(".floor");
                var $topTit = $('.top-tit');
                $('.top-tit .tit-to').each(function (i) {
                    $(this).click(function () {
                        flag = false;
                        var offsetTop = $floors.eq(i).offset().top - 40;
                          $("html,body").animate({
                            scrollTop: offsetTop
                        }, 300, function () { flag = true })
                   
                    })
                })
                $(window).scroll(() => {
                    if (flag) {
                        var scrollTop = $(window).scrollTop();
                        $floors.each((i, elem) => {
                            var $f = $(elem);
                            if ($f.offset().top < scrollTop + 43)
                                 _this.thisActive = i
                            if ($floors.eq(4).offset().top < scrollTop + 300){
                                _this.thisActive = 4
                            }
                        });

                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box-row {
        display: flex;
        flex-direction: row;
    }

    .page-container {
        background: #e6ebf2;
        max-width: 750px;
        margin: 0 auto;

        .top-tit {
            background: #fff;
            position: fixed;
            top: 0;
            width: 100%;
            border-bottom: 1px solid #ced2d9;
            z-index: 1000;
            display: flex;
            flex-direction: row;

            .tit-to {
                color: #333;
                padding: 10px;
                display: block;

                &.active {
                    color: #09f;
                    font-weight: 700;
                    border-bottom: 2px solid #09f;
                    margin-bottom: -1px;
                }
            }
        }

        .banner {
            padding: 60px 0 0px 0;

            img {
                display: block;
                margin: 0 auto;
                width: calc(100% - 30px);
            }
        }
    }

    .conten-tit {
        padding: 30px 15px 0 15px;

        .h1 {
            font-size: 18rpx;
            font-weight: 700;
            text-align: center;
        }

        .h2 {
            font-size: 12rpx;
            color: #999;
            padding-bottom: 10px;
            text-align: center;

        }

        .intro {
            // margin: 0 15px;
            line-height: 26px;
            padding: 15px;
            background: #fff;
            border-radius: 4px;
            color: #000;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        }
    }

    .advantage-bor {
        border-bottom: 1px solid #e6ebf2;
        padding: 20px 0 20px 50px;
    }

    .advantage-bor:first-child {
        padding-top: 0;
    }

    .advantage-bor.last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .advantage img {
        height: 74px;
        width: 77px;
        margin-right: 20px;
    }

    .advantage-tip {
        width: calc(100% - 97px);
    }

    .advantage-tip1 {
        margin-top: 14px;
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: 700;
        color: #000;
        line-height: 22px;

    }

    .advantage-tip2 {
        font-size: 12px;
        color: #999;
        line-height: 18px;
    }

    .culture-tit {
        padding-bottom: 20px;
    }

    .culture-tit .h1 {
        color: #fff;
    }

    .culture-tit .h2 {
        color: #bec9cc;
    }

    .culture-conten {
        margin-top: 30px;
        padding-top: 35px;
        background-image: url('../../assets/image/aboutus/culturebg.jpg');
        background-size: 100% 200px;
        background-repeat: no-repeat;
        .culture-box {
            padding-left: 30px;
            padding-bottom: 20px;
            position: relative;
        }

    }

    .linkbg {
        background-image: url('../../assets/image/aboutus/linkbg.jpg');
        background-size: 100% 200px;
        background-repeat: no-repeat;
        padding-bottom: 1px;
    }

    .culture-box:last-child,
    .pb0 {
        padding-bottom: 0px;
    }

    .culture-box .culture img {
        width: 40px;
        height: 40px;
        margin-right: 18px;
    }

    .culture-box .culture img.jiazhiguan {
        margin: 11px 18px 0 0;
    }

    .culture-box .advantage-tip {
        width: calc(100% - 58px);
    }

    .culture-box .advantage-tip1 {
        margin-top: 0;
    }

    .big-event {
        position: relative;
        padding: 8px 18px 0 0px;
    }

    .big-event-circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #09f;
        position: absolute;
        top: 8px;
        z-index: 2;

    }

    .big-event-line {
        background: #e6ebf2;
        width: 2px;
        height: 143%;
        position: absolute;
        top: 10px;
        left: 3px;
        z-index: 1;

    }

    .big-event-box .culture-box:last-child .big-event-line {
        display: none;
    }

    .big-event-box {
        margin-bottom: 30px;
    }

    .big-event-box .culture-box {
        padding-left: 25px;
        padding-bottom: 20px;
    }

    .our-advantage-box{
        margin-bottom: 30px;
        .our-advtage {
              padding: 0 15px;
        }
    }
  

    .content {
        background: #fff;
        border-radius: 3px;
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 15px 0;
        border-bottom: 1px solid#e6ebf2;
        &:last-child{
            border-bottom: none;
        }
    }

    .mb0 {
        margin-bottom: 0rpx;
    }

    .mt30 {
        margin-top: 15px;
    }

    .why-img {
        position: absolute;
        top: -4px;
        left: 15px;
        width: 58px;
        height: 30px;

    }

    .why-download-img {
        img {
            width: 140px;
            height: 140px;
            margin-right: 10px;
            display: inline-template;
        }
    }

    .why-download-div {
        width: calc(100% - 150px);
    }

    .why-download-tit {
        font-size: 14px;
        font-weight: 700;
        line-height: 21px;
        margin-bottom: 5px;
        color: #333;
    }

    .why-download-cont {
        font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #999;
        line-height: 18px;
        margin-bottom: 5px;
    }

    .why-download-cont:last-child {
        margin-bottom: 0;
    }

    .why-tip {
        background: #eb4849;
        color: #fff;
        font-size: 12px;
        height: 20px;
        line-height: 18px;
        margin-bottom: 5px;
        width: fit-content;
        border-radius: 20px;
        padding: 0 5px;
    }

    .conect-us-box {
        padding: 25px 15px 15px 15px;
        margin: 0 0px 30px 0px;
        background: #fff;
        border-radius: 4px;
        color: #000;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }

    .conect-us {
        border-bottom: 1px solid #e6ebf2;
    }

    .conect-us-tit {
        color: #999;
        font-size: 12px;
    }

    .tel-number-box .box-col {
        // padding: 0 15px;
        width: 50%;
        text-align: center;
        margin: 5px 0 15px 0;

    }

    .tel-number-box .box-col:first-child {
        border-right: 1px solid #e6ebf2;
    }

    .tel-number-box .tel-number {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 5px;
        line-height: 22px;
        white-space: nowrap;
    }

    .tel-number-icon {
        justify-content: center;

    }

    .tel-number-box .icon-call {
        font-size: 16px;
        color: #666;
        margin-right: 5px;
    }

    .tel-number-box .call-us {
        font-size: 12px;
        color: #666;
    }

    .conect-us-content {
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }

    .conect-us-20 {
        padding: 10px 0;
    }

    .conect-us-address {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .conect-us-address .box-row {
        justify-content: space-between;
    }

    .address {
        // width: 240px;
        text-indent: 0rpx;
        padding-left: 0rpx;
        text-align: left;
        margin-right: 15px;
    }

    .icon-address {
        font-size: 24px;
        color: #666;
        margin: 9px 0 0 0;
    }
    @media only screen and (min-width: 320px) and (max-width: 359px){
      .why-download-img {
            img {
                width: 120px;
                height: 120px;
                margin-right: 10px;
                display: inline-template;
            }
        }
    }
</style>