宝哥软件园

前端开发常见问题精选(三)

编辑:宝哥软件园 来源:互联网 时间:2021-12-12

一、如何禁止微信h5页面默认下拉,并且同时页面局部可滚动?

众所周知,微信浏览器默认可以上下拉,就像下面这样:

 前端开发常见问题精选(三)(图1)

然而,有时我们需要禁止它。我们做什么呢

1. 禁止页面的touchmove事件

document . addeventlistener(' touch move ',函数(e){ e . preventdefault();});方法简单明了,但问题是浏览器默认下拉被禁用,但页面不能滑动。因此,此方法仅适用于可以在单个屏幕中显示全部内容的页面。

2. 使用iScroll.js插件

这个方法确实值得一提。它不仅可以禁止浏览器默认下拉,同时还可以使页面部分可滚动。

使用iScroll.js插件时有几点需要注意:

调用插件的对象元素只能有一个子元素,也就是说,如果滚动区有多个子元素,需要一个元素来包装。最好不要在调用插件的对象元素样式中设置外边距,否则宽度和高度计算可能会不准确。在使用插件的默认状态下,滚动区所有可点击的元素,如按钮、链接等都是无效的。如果要恢复正常点击,可以配置选项,点击为真。

word-wrap:="">iScroll.js插件的具体用法可以参考:http://wiki.jikexueyuan.com/project/iscroll-5/。

二、Less中写border-radius时用到 “/” 时该如何处理?

不知道大家现在写CSS是怎么写呢?是直接写原生的CSS,还是使用像Sass或Less这样的预编译语言呢?

如果你是习惯使用Less,那么遇到border-radius中的 “/” 该如何处理呢?

大家可能都知道border-radius有很多种写法,不知道的话可以看《你不知道的CSS3圆角》这篇文章,其中有比较详细的介绍。然而,如果是在Less中直接写 “/” 可不行,因为它会被认为是个除号而直接参与运算了。这时的解决方法就是使用 e(“/”) 来替代,比如像下面这样:

//Less代码.box{ border-radius: 5px e("/") 10px;}
//编译后的CSS代码.box{ border-radius: 5px / 10px;}

三、Less中如何写循环?

Less中的循环其实就像是其他编程语言中通常意义上的递归调用,用法如下:

.loop(@n, @i:1) when (@i <= @n){  // 此处仅为函数定义 .loop(@n,@i+1);}.loop(4);  // 此处为函数调用,代表循环4次

其中loop是方法名,可以由自己喜好定义,i 是循环因子,n 是循环次数。比如想要给列表元素有规律地依次设置不同大小,可以这样写:

//Less代码.loop(@n, @i:1) when (@i <= @n){  // 此处仅为函数定义 li:nth-child(@{i}){   // 注意此处需用 {} 将 i 括起   width: @i*100px;   height: @i*100px; } .loop(@n,@i+1);}.loop(4);
//HTML代码

这时四个 li 元素的宽高分别为 100、200、300和400。

四、如何将一个数组中的元素全部赋值给另外一个数组?

你可能会想,这还不简单,将 a 数组直接赋值给 b 数组不就行了吗? 就像下面这样:

var a = [1,2,3];var b = a;

实际上通过这种方式赋值只不过是将 a 数组所在地址赋值给了 b,如果 b 中元素改变其实也就改变了 a 元素,那么该如何保证赋值操作之后改变 b 而不会影响 a 呢?

其实这里就涉及到的深拷贝和浅拷贝的区别了。

简单来说,浅拷贝其实就是简单地对地址的赋值,上面例子就是浅拷贝。

而这里我们要说的是数组的深拷贝,也就是开辟一个新的存储地址,然后将 a 数组中的所有元素存入该新地址中,最后将 b 指向该地址。

具体实现其实非常简单:

b = [].concat(a);

我们知道,JS数组方法中的concat()是用于合并两个数组的,返回的是一个新的数组。

以上是我在工作当中所遇到的一些问题总结,在此与大家共勉!

更多资讯
游戏推荐
更多+