前端开发常见问题精选(三)-阿里云开发者社区

开发者社区> 前端王睿> 正文

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

简介: 一、如何禁止微信h5页面默认下拉,并且同时页面局部可滚动? 众所周知,微信浏览器默认是可以上拉和下拉的,就像下面这样: 微信浏览器下拉 然而,有时候我们需要禁止它,那该怎么做呢? 1. 禁止页面的touchmove事件 document.addEventListener('touchmove',function(e){ e.preventDefault(); }); 该方法简洁明了,但是问题来了,浏览器默认下拉是禁掉了,可页面却不能滑动了。
+关注继续查看

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

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

微信浏览器下拉

然而,有时候我们需要禁止它,那该怎么做呢?

1. 禁止页面的touchmove事件

document.addEventListener('touchmove',function(e){
    e.preventDefault();
});

该方法简洁明了,但是问题来了,浏览器默认下拉是禁掉了,可页面却不能滑动了。因此,该方法只适用于在单屏内能够显示全内容的页面。

2. 使用iScroll.js插件

该方法才是真正要提到的,既可以禁止浏览器默认下拉,也能同时让页面局部可滚动。

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

① 调用该插件的对象元素只能存在一个子元素,也就是说如果在滚动区域中存在多个子元素,需要使用一个元素来包裹它们。
② 调用该插件的对象元素样式中最好不要设置外边距,否则可能出现宽高计算不准确的情况。
③ 使用该插件的默认状态下,滚动区域内的按钮、链接等一切可点击元素均失效,如需恢复正常点击,可以配置options.click为true。

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代码
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

这时四个 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()是用于合并两个数组的,返回的是一个新的数组。有关concat()的具体用法,可以查看我之前写的一篇文章:《JS数组操作之增删改查》

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
移动开发之常见问题
以下内容只进行常规测试,如果出现其他问题,请留言 1.获取浏览器的高度 document.documentElement.clientHeight 备注: alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).
612 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9497 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13186 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11509 0
大数据开发—常见问题(1)
我们在进行大数据开发过程中,会遇到各种问题,本文将定期收集整理一些在使用阿里云数加 MaxCompute 和 大数据开发套件 过程中遇到的常见问题,供大家参考~
2897 0
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1277 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6895 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载