邢台网站建设哪家公司好,南宁网站制作公司哪家好,wordpress后台换中文,沈阳网站建设公司报价这一小节#xff0c;js-tool-big-box工具库又迎来了两个非常实用功能成员#xff0c;分别是检测当前浏览器是否为手机端浏览器#xff0c;还有检测某元素当前是否处于可视范围内。
1 安装引入
通过npm安装#xff0c;执行以下命令 npm i js-tool-big-box 这两个功能…这一小节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 classdemo被检测元素/div 。下面我要开始下拉了啊请注意 使用方法总结
方法名返回值入参 isElementInViewport true或者false第一个参数必填表示需要检测的元素可以传入带有class的名字如“.demo”也可以是一个id的名字如“#demo”
4 小结 好啦这就是这一小节添加的2个工具方法js-tool-big-box的功能越来越丰富了这都是小伙伴们的功劳希望有更多的小伙伴提供一些实用的方法加入到js-tool-big-box这个大家庭中来。
