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

简介: 一、如何禁止微信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数组操作之增删改查》

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

相关文章
|
5月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
204 0
|
5月前
|
存储 前端开发 API
对象存储OSS产品常见问题之获取文件结构并在前端页面展示如何解决
对象存储OSS是基于互联网的数据存储服务模式,让用户可以安全、可靠地存储大量非结构化数据,如图片、音频、视频、文档等任意类型文件,并通过简单的基于HTTP/HTTPS协议的RESTful API接口进行访问和管理。本帖梳理了用户在实际使用中可能遇到的各种常见问题,涵盖了基础操作、性能优化、安全设置、费用管理、数据备份与恢复、跨区域同步、API接口调用等多个方面。
235 0
|
5月前
|
前端开发 API 项目管理
云效常见问题之编译前端的时候报了个错说证书过期如何解决
云效(CloudEfficiency)是阿里云提供的一套软件研发效能平台,旨在通过工程效能、项目管理、质量保障等工具与服务,帮助企业提高软件研发的效率和质量。本合集是云效使用中可能遇到的一些常见问题及其答案的汇总。
|
编解码 缓存 前端开发
【经验分享】Web前端开发测试常见问题总结
案例总结web前端开发常见问题!欢迎留言、打卡!
495 0
【经验分享】Web前端开发测试常见问题总结
|
Web App开发 缓存 前端开发
|
前端开发 索引 JavaScript
前端开发常见问题精选(四)
一、Swiper.js的loop模式下,如何正确获取索引值? Swiper.js,相信作为前端开发者的你一定知道它吧。它几乎可以用来制作任何形式的轮播图,非常方便和实用。
1040 0
|
Web App开发 前端开发 JavaScript
前端开发常见问题精选(二)
一、如何解决Canvas画布在移动端显示模糊的问题? Canvas画布在PC端显示正常,但是放在移动端却发现整个画布都有点模糊,其实这里有个比较简单的解决方法: 先给canvas标签的width和height这两个属性值乘以2,再设置其样式中的width和height的实际大小,最后注意须将JS中与Canvas相关的数值均乘以2。
1089 0
|
前端开发 iOS开发 移动开发
前端开发常见问题精选(一)
一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中? 这个问题最常见的就是让文字在浏览器窗口中水平和垂直方向居中了,因为文字的宽度和高度均不确定,浏览器窗口的宽高我们也不知道,那这个问题该如何解决呢? 1、50%定位+translate居中法 html,body{ height: 100%;} .
1100 0
|
26天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
31 0