1、js 判断iPhone|iPad|iPod|iOS|Android客户端

         //  fullScreen代表整个页面最外层的高度height：fullScreen//    50px 是底部tabar的高度//  env(safe-area-inset-bottom) iphone的一个安全高度if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {window.location.href ="iPhone.html";this.fullScreen = 'calc(100vh - 50px - env(safe-area-inset-bottom))'} else if (/(Android)/i.test(navigator.userAgent)) {window.location.href ="Android.html";this.fullScreen = 'calc(100vh - 50px)'} else {window.location.href ="pc.html";};

2、js实现防抖

一般用于按钮的点击，用户点击后，在一段时间后才能点击执行里面的函数

//防抖：在第一次触发事件时，不立即执行函数，而是给出一个限定值，比如200ms，然后：
//如果在200ms内没有再次触发事件，那么执行函数
//如果在200ms内再次触发函数，那么当前的计时取消，重新开始计时//基础版
function debounce(fn, delay) {var timer = null;return function () {if (timer) clearTimeout(timer);timer = setTimeout(function () {fn();},delay)}
}//优化版
function debounce(fn, delay) {var timer = null;return function() {if (timer) clearTimeout(timer);// 获取this和argumentvar _this = this;var _arguments = arguments;timer = setTimeout(function() {// 在执行时，通过apply来使用_this和_argumentsfn.apply(_this, _arguments);}, delay);}
}

下面这个也不算防抖，

但是巧妙运用了loading，就是只有等loading完之后，才能执行该执行的步骤。

还有一种方式就是，在loading的时候，将按钮设置为disable，不能点击

3、 js实现节流

一般用于高频触发的事件、比如触发底部等

（但触发底部uniapp的生命周期函数已经写好了，不需要我们自己写节流了）

//节流：
//如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效//基础版function throttle(fn, interval) {var last = 0;return function () {// this和arugmentsvar _this = this;var _arguments = arguments;var now = new Date().getTime();if (now - last > interval) {fn.apply(_this, _arguments);last = now;}}}
//优化版function throttle(fn, interval) {var last = 0;var timer = null; // 记录定时器是否已经开启return function () {// this和arguments;var _this = this;var _arguments = _arguments;var now = new Date().getTime();if (now - last > interval) {if (timer) { //若已经开启，则不需要开启另外一个定时器了clearTimeout(timer);timer = null;}fn.apply(_this, _arguments);last = now;} else if (timer === null) { // 没有立即执行的情况下，就会开启定时器//只是最后一次开启timer = setTimeout(function () {timer = null; // 如果定时器最后执行了，那么timer需要赋值为nullfn.apply(_this, _arguments);},interval)}}}

4、页面在弹窗时禁止底部页面滚动（h5端）

`@touchmove.stop.prevent`

在遮罩层中添加 @touchmove.stop.prevent

缺点：弹窗里面内容有滚动条的也会无法滚动。

 <view @touchmove.stop.prevent>     </view>

5、scrollIntoView

进入页面某个元素需要出现在可视区

值应为某子元素id（id不能以数字开头）

uniapp开发技术相关推荐

跨平台应用开发进阶(六十一)：uni-app 跨平台技术开发框架可行性调研
文章目录一.流程类二.研发类(uni-app框架) 三.心得分享(研发踩坑&uni-app踩坑) 四.拓展阅读一.流程类 IOS和安卓企业开发者账户申请流程(申请渠道.需要提供的相关证明 ...
基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序
塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序.管理后台,后端服务的项目,它内置提供了会员分销, 区域代理, 商品零售等功能的新零售电商系统.强大弹性的架 ...
uniapp多端开发技术解析
介绍 Uniapp是 DCloud公司于2012年开始研发的能够一次代码开发,生成H5.小程序(微信.支付宝.百度.华为等).APP等应用的技术的统称,开发工具是HBuilderX,功能非常强大,由此 ...
技术合伙人必备攻略---app开发技术栈调研--多种方案对比--uniapp学习路线
app开发技术方案对比 app开发主要有几种技术方案如下: 原生开发原生开发简介原生(native)开发从定义上来说一般是指用原生开发语言开发,原生开发语言就是开发整个系统时使用的编程语言. 对 ...
uniapp开发实例github_跨端开发痛点？送你一款Vue最流行的跨端框架——uni-app
前言今天来聊一下前端必备技能--小程序开发. 从最早发布的微信小程序,到后来的支付宝小程序.字节跳动小程序.百度小程序.QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢 ...
（个人使用）uni-app开发（官方资源）· 汇总
文章目录 (个人使用)uni-app开发(官方资源)· 汇总 1. [uni-app官方框架](https://uniapp.dcloud.io/collocation/pages) 2. uni-a ...
java短视频开发技术_看Java学员如何用前后端分离技术搭建短视频健身APP
知了堂在教学过程中一直十分注重学员的实践能力,每阶段结束必有项目考核,全面检验分析学员学习效果.为更好的进行下一阶段的课程学习,本周一Java32班学员迎来了第二阶段的项目考核. 让我们来看看此次考核 ...
uniapp开发微信小程序-软考刷题小程序
记录一次基于uniapp的微信小程序开发前言计算机科学与技术辅修学士的课程设计最终决定做微信小程序(比较简单) 刷题小程序方向题库是软考内容开发语言前端uniapp开发后端django开 ...
uni-app开发中的#ifdef MP是什么意思？条件编译
跨端兼容https://uniapp.dcloud.io/platform uni-app 已将常用的组件.JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业 ...

uniapp开发技术

1、js 判断iPhone|iPad|iPod|iOS|Android客户端

2、js实现防抖

3、 js实现节流

4、页面在弹窗时禁止底部页面滚动（h5端）

`@touchmove.stop.prevent`

5、scrollIntoView

uniapp开发技术相关推荐

最新文章

热门文章

uniapp开发技术

1、js 判断iPhone|iPad|iPod|iOS|Android客户端

2、js实现防抖

3、 js实现节流

4、 页面在弹窗时禁止底部页面滚动（h5端）

@touchmove.stop.prevent

5、scrollIntoView

uniapp开发技术相关推荐

最新文章

热门文章

4、页面在弹窗时禁止底部页面滚动（h5端）

`@touchmove.stop.prevent`