前端JS必用工具【js-tool-big-box】学习,检测当前是否为手机端浏览器,检测某元素是否处于当前可视范围内

article/2024/7/24 1:27:14

这一小节,js-tool-big-box工具库又迎来了两个非常实用功能成员,分别是检测当前浏览器是否为手机端浏览器,还有检测某元素当前是否处于可视范围内

1 安装引入

通过npm安装,执行以下命令

npm i js-tool-big-box

这两个功能,工具库提供了一个叫browserBox的对象,所以代码中需要引入这个对象

import { browserBox } from 'js-tool-big-box';

2 检测当前是否为手机端浏览器 

这个功能还是很实用的,经常需要判断是否为手机端浏览器,做出与PC端不同的展示效果,判断示例代码如下:

const checkBrowser = browserBox.isMobileBrowser();
console.log('当前是手机端浏览器吗?', checkBrowser);

 上面两个图中,我们切换了浏览器的展示形式,分别以PC端和移动端两种形式做了效果展示。

使用方法总结:

方法名返回值入参
isMobileBrowsertrue或者false--

3 检测某元素是否处于可视范围内 

例如我们做懒加载的时候,就需要判断当前图片处于可视范围内,再开始加载图片,Vue2示例代码如下:

mounted() {window.addEventListener('scroll', this.handleScroll);},methods: {handleScroll() {const isInScreen = browserBox.isElementInViewport('.demo');console.log('.demo在可视区域内吗?', isInScreen);},go2Index() {this.$router.push("/index");},}

然后我们在HTML模板的地方做了很长的换行内容,意图就是为了有个浏览器下拉展示的过程,代码就不放了,基本就是上面30个br标签,下面30个br标签,中间一个 <div class="demo">被检测元素</div> 。下面我要开始下拉了啊,请注意!!!

使用方法总结:

方法名返回值入参

isElementInViewport

true或者false第一个参数必填,表示需要检测的元素,可以传入带有class的名字,如“.demo”,也可以是一个id的名字,如“#demo

4 小结 

 好啦,这就是这一小节添加的2个工具方法,js-tool-big-box的功能越来越丰富了,这都是小伙伴们的功劳,希望有更多的小伙伴提供一些实用的方法,加入到js-tool-big-box这个大家庭中来。


http://www.ngui.cc/article/show-2100778.html

相关文章

跨域数据流动:数据提取过程中的治理与安全双轮驱动

跨域数据流动&#xff1a;数据提取过程中的治理与安全双轮驱动 随着信息技术的飞速发展&#xff0c;跨域数据流动已成为现代社会的常态。从医疗记录到金融交易&#xff0c;从社交媒体到企业运营&#xff0c;数据在各个领域之间频繁交换&#xff0c;为社会发展带来了极大的便利…

C语言例题42、打印金字塔

#include <stdio.h>void main() {int i, j;for (i 0; i < 5; i) {for (j 4; j > i; j--) {//输出空格printf(" ");}for (j 0; j < 2 * i 1; j) {//输出星号printf("* ");}printf("\n");} }运行结果&#xff1a; 本章C语言经…

外贸邮件营销平台2024热门排行榜

在数字化全球经济的大背景下&#xff0c;外贸邮件营销作为企业开拓国际市场的重要工具&#xff0c;其重要性不言而喻。正确地选择一个高效的邮件营销平台对于提升国际业务拓展能力、增强客户沟通效率以及最终实现销售转化具有至关重要的影响。本文对当前市场上广受欢迎的外贸邮…

nginx文件夹内文件解释<四>

koi-win解释说明 [rootrelease nginx]# more koi-win charset_map koi8-r windows-1251 {80 88 ; # euro95 95 ; # bullet9A A0 ; # 9E B7 ; # &middot;A3 B8 ; # small yoA4 BA ; # small Ukrainian yeA6 B3 ; # small Ukrainian iA7 BF ; # small Ukrainian …

webpack优化构建体积示例-压缩图片:

不同的图片格式有不同的特点和用途&#xff0c;它们也需要不同的压缩算法和技术&#xff0c;也为了保证能在各个浏览器环境下能正常加载显示&#xff0c;所以需要用到多个插件 在使用imagemin-webpack-plugin来配置图片压缩时&#xff0c;你需要确保已经安装了该插件以及它可能…

Vitis HLS 学习笔记--优化本地存储器访问瓶颈

目录 1. 简介 2. 代码解析 2.1 原始代码 2.2 优化后 2.3 分析优化措施 3. 总结 1. 简介 在Vitis HLS中&#xff0c;实现II&#xff08;迭代间隔&#xff09; 1是提高循环执行效率的关键。II1意味着每个时钟周期都可以开始一个新的迭代&#xff0c;这是最理想的情况&…

深入探索Jetpack Compose:大前端式客户端开发实战

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

机房、配电室可视化运维这么卷?不搞3D,出门没法打招呼。

机房和配电室的可视化运维确实可以非常复杂和卷。通过使用3D技术&#xff0c;可以更加直观地展示机房和配电室的布局、设备分布和运行状态。 以下是一些与机房和配电室可视化运维相关的关键点&#xff1a; 3D建模&#xff1a;使用计算机图形学和3D建模软件&#xff0c;可以创建…

homebrew国内镜像-100%成功

百分百成功安装brew命令如下&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

ARM9驱动开发基础概念

2、arm9的通用寄存器有几个&#xff1f; 3、异常向量表中irq的异常向量是多少&#xff1f; 4、cpsr中的那几位是用来设置工作模式的&#xff1f; 5、r13,r14,15别名是什么&#xff1f;有什么作用&#xff1f; r13栈顶指针 &#xff1a;它用于实现堆栈指针操作&#xff0c;实…