vue里,我用jq去获取元素的offsettop出现问题

vue里,我用jq去获取元素的offsettop出现问题,第1张

windowonload=function(){

        waterfall();

        windowonscroll=function(){

            

    var parent=documentgetElementById("main");

    var boxs=getByClass(parent,"box");

    var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;

       var documentH=scrollH+documentdocumentElementclientHeight;

    var    lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);

       /763/

     

        if(lastH-350<documentH){      //这里的lastH不减掉350,就无法进入if语句???

                                /465/

dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};

for(var i=0;i<dataIntdatalength;i++){

        var divB=documentcreateElement("div");

        divBclassName="box";

        parentappendChild(divB);

        var divP=documentcreateElement("div");

        divPclassName="pic";

        divBappendChild(divP);

        myimg=documentcreateElement("img");

        myimgsrc="/images/"+dataIntdata[i]src;

        

        divPappendChild(myimg);

}

waterfall();

}

}

}

function waterfall(){

    

var oParent=documentgetElementById("main");

var boxs=getByClass(oParent,"box");

var boxW=boxs[0]offsetWidth;

var num=Mathfloor(documentdocumentElementclientWidth/boxW);

oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";

  

    boxHarr=new Array();

    for(var i=0;i<boxslength;i++){

        if(i<num){

            boxHarrpush(boxs[i]offsetHeight);

        }else{

           

            var minH=Mathminapply(null,boxHarr);

            var minHindex=getminHindex(boxHarr,minH);

            boxs[i]styleposition="absolute";

            boxs[i]styletop=minH+"px";

            boxs[i]styleleft=minHindexboxW+"px";

            //boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";

            boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;

        }

    }

}

function getByClass(parent,clsName){

    a=parentgetElementsByTagName('');

    var arr=[];

    for(var i=0;i<alength;i++){

        if(a[i]className==clsName){

            arrpush(a[i]);

        }

    }

    return arr;

}

function getminHindex(arr,minH){

    

    for(var i in arr){

        if(arr[i]==minH)

            return i;    

    }

}

这个你可以换种思路,用一个变量来控制显示样式,官网上面也有说。当这个变量为true时,说明有这个样式,当变量为false时则没有这个样式。

>

用v-on指令或者@监听DOM事件,并在触发时运行一些JavaScript代码;

参考:JS,Vue2,介绍,与Vue3区别,MVVM设计模式,模板语法,数据绑定

Vue中的事件修饰符:

1、prevent:阻止默认事件(常用);

2、stop:阻止事件冒泡(常用);

3、once:事件只触发一次(常用);

4、capture:使用事件的捕获模式;

5、self:只有eventtarget是当前 *** 作的元素时才触发事件;

6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

Vue中常用的按键别名:

回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊,必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。

代码案例

模板内的表达式是非常便利的,用于简单的运算。当其过长或逻辑过于复杂时,会难以维护,因此,当遇到复杂的逻辑时应该使用计算属性,用computed计算属性。

代码案例

通过watch来响应数据的变化。

代码案例

class样式,写法:class="xxx" ,其中xxx可以是字符串、对象、数组。

1、字符串写法适用于:类名不确定,要动态获取。

2、对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。

3、数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

style样式,写法::style="{fontSize: xxx}",其中xxx是动态值;:style="[a,b]"其中a、b是样式对象。

代码案例

以上就是关于vue里,我用jq去获取元素的offsettop出现问题全部的内容,包括:vue里,我用jq去获取元素的offsettop出现问题、vue 判断元素是否有class、JS,Vue2,事件处理,计算属性,监视属性,class与style绑定等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10180096.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存