原生ｊｓ第8页

滚动条的触底加载(原生和Vue实现三种方法)

滚动条的触底加载提示:今天后端同学有遇到关于滚动条触底加载的问题,他使用的是element-UI中的一个无限滚动(个人尝试使用了一下,感觉很垃圾,不推荐使用)就手写了一个原生JS的方法,以前有做过类似的功能

满脑子技术的前端工程师·2023-10-13 16:33

VUE中用原生JS实现触底加载数据

VUE中用原生JS实现触底加载数据在vue开发过程中使用第三方组件是不可避免的,但是第三方样式的css样式属实头痛,所以我选择原生JS的写法完成了触底加载1:定义datapage:1,//页数limit

多晴丶·2023-10-13 16:33

原生js实现触底加载下一页

简单的布局{{item}}js需要先引入vuevarapp=newVue({el:'#app',data:{message:'HelloVue!',blocks:[1,2,3,4]},created(){window.onload=_=>{constcontainer=document.getElementById('app');console.log(container);container.a

马小MS·2023-10-13 16:32

原生js实现触底加载下一页(2不引用VUE)

定义一个scroll容器javascriptvardata=[1,2,3,4];functionrender(){document.getElementById('app').innerHTML='';lettempHtml=''data.forEach(item=>{tempHtml+=`${item}`;})app.innerHTML=tempHtml;}window.onload=_=>{c

马小MS·2023-10-13 16:32

原生js实现图片懒加载并实现页面触底加载更多

思路：设置自定义属性绑定到img上src上绑定load图当图片处于视口区域时将自定义属性的url替换图片的url即可Document*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;flex-direction:column;align-items:center;}img{display:block;margin-top:2

路西·2023-10-13 16:02

原生js的触底加载

functiongetDocumentTop(){varscrollTop=0,bodyScrollTop=0,documentScrollTop=0;if(document.body){bodyScrollTop=document.body.scrollTop;}if(document.documentElement){documentScrollTop=document.documentEle

负者歌于途，·2023-10-13 15:56

原生JS JavaScript实现懒加载效果

我是一名接触编程不久的小白，今天为大家带来这个案例，希望可以帮助到你。懒加载是现在常见的的一种加载方式，是滑动到一定距离才加载新的数据，这样可以减少设备内存的负担。话不多说，开始展示吧.这个懒加载效果使用滚动条事件触发，每当滚动条触底一次就会将全部数据重新截取重新载入。每次向下滑动，距离顶部的距离都会改变，每一段距离需要截取的信息数量都不同，用当前距离顶部的高度值除以单条数据的高度（可能有时需要减

weltTree·2023-10-13 15:56

岁月如歌_·2023-10-13 15:24

原生js触底加载案例

data(){return{RoomData:[],isBool:false,limit:0,isLoading:false,}},methods:{roomClick(value){location.href=value},RoomApi(){this.limit=this.limit+30if(this.limit>=210){this.limit=180}this.$axios.get(`h

web-难大师·2023-10-13 15:22

原生js如何实现上拉加载与下拉刷新？

下拉刷新首先，在页面顶部添加一个下拉刷新的区域，然后监听touchstart、touchmove和touchend等事件、当用户在下拉刷新区域进行下拉操作时，触发touchmove事件，并判断下拉的距离是否超过一定阈值。如果超过阈值，则触发下拉刷新操作，更新数据并重新渲染页面。上拉加载上拉加载的实现方式与下拉刷新类似，也是通过监听滚动事件，并判断滚动到底部触发相应的操作使用antd-mobile分

J轩·2023-10-13 14:12

原生js如何实现上拉加载下拉刷新？

一、前沿下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用二、实现原理上拉加载及下拉刷新都依赖于用户交互最重要的是要理解在什么场景

晚时之秋·2023-10-13 14:11

原生JS实现下拉刷新（移动端）

原生JS实现下拉刷新（移动端）主要利用touchstart、touchmove、touchend事件结合CSS定位Document*{padding:0;margin:0;}.box{position:

LLtaishuai·2023-10-13 14:09

原生js如何实现上拉加载下拉刷新

1.上拉加载使用场景：移动端历史日志、内容列表等模块中使用简述：当列表滑动到底部时，再做请求加载下一页列表，有利于减少http请求和浏览器渲染压力，提高页面首次加载速度原理：获取滑动内容外部盒子高度：document.querySelector(“.container”).clientHeight获取整个内容的高度：document.querySelector(“.ul”).scrollHeigh

爱上猫的程序猿·2023-10-13 14:08

原生js实现上拉加载和下拉刷新功能

需要了解什么时候出现滚动条当网页的内容高度或者宽度大于网页的高度或者宽度，网页会出现竖直或者水平的滚动条。如上图所示的情况就会出现滚动条。所需js相关的apiconsthtml=document.documentElementconsole.log('元素本身的高度',html.clientHeight)console.log('滚动条竖直滚动的距离',html.scrollTop)console

Melody_lw·2023-10-13 14:37

原生js如何实现上拉加载，下拉刷新？

一、前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用二、实现原理上拉加载及下拉刷新都依赖于用户交互最重要的是要理解在什么场景

XXXX_康康吖·2023-10-13 14:33

使用原生js实现上拉加载，下拉刷新

上拉加载，下拉刷新前言上拉加载简单实现下拉刷新前言下拉刷新和上拉加载两种交互方式通常出现在移动端，本质上等同于pc网页中的分页，只是交互形式不同开源社区有很多优秀的解决方案，如iscroll,better-scroll,pulltorefresh.js等使用原生方式实现上拉加载，下拉刷新，有助于对对第三方库有更好的理解与使用上拉加载上拉加载本质是页面触底，或者快要触底时的动作判断触底我们需要了解以

夜斗(dou)·2023-10-13 14:01

原生js实现下拉刷新和上拉加载更多

1.下拉刷新由于原生js太久不用了,这里列一下此处涉及到的前置知识点:移动端触屏事件:touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时)手指在页面上的坐标

williamyi74·2023-10-13 14:58

js中实现深拷贝的4种方法

js中深拷贝的方法原生js中递归函数拷贝将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据,两个对象或数组不共享一块内存letobj={abc:'123',def:[{a:1,b:2,

Wyyyy1024·2023-10-13 11:16

JS深拷贝的五种方法

function(obj){let_tmp=JSON.stringify(obj);//将对象转换为json字符串形式letresult=JSON.parse(_tmp);//将转换而来的字符串转换为原生

小刘03·2023-10-13 11:06

五八到家面试

2.div绑定click事件原生js还有那些方法？3.事件代理和事件委托，它的原理是什么？好处是什么？4.什么时候会遇到跨域问题？什么叫不同源？同源策略是js的还是浏览器的？

水木子_三月·2023-10-12 20:19

用原生JS实现倒计时

html部分倒计时距离2020年春节还剩下天时分秒css部分*{margin:0;padding:0;}.box{width:260px;height:300px;background:rgb(241,60,60);margin:100pxauto;text-align:center;}.box>h1{color:aliceblue;font-size:50px;margin-bottom:80p

Naruto_e4aa·2023-10-12 16:47

js 判断滚动到底部

js滚动到底部判断//判断标准：窗口高度+滚动条位置>=页面高度/*--------------------------------------------*///原生JS判断整个文档滚动至底部window.onscroll

小小优化师 anny·2023-10-12 12:40

NodeJs——实现跨域方法总结

原生js封装jsonp//封装jsonp函数functionjsonp(options){//动态设置script标签varscript=docum

捞起月亮的渔民~·2023-10-12 07:32

Express 通过 CORS 或 JSONP 解决跨域问题

CSRF攻击解决跨域问题CORSCORS响应头部Access-Control-Allow-Origin简单请求预检请求预检请求包含的两次请求解决CORS中间件使用CORS中间件处理跨域请求JSONP通过原生

BinaryMoon·2023-10-12 07:01

利用koa+原生js实现文件上传

1.文件上传在实际前端开发中,文件上传是一个很常见的功能,通常我们会将视频,图片等格式的文件上传到服务器以达到我们的需求.例如上传头像来达到换头像的功能等等.1.1起步通常在我们实现文件上传有这么几步获取当前事件对象的文件对象创建FormData对象,并将带上当前的文件对象.通过post请求向后台发送请求上传文件.并带上formdata.搭建一个后台环境,向后台发送请求.后台通过获取前端传递过来的

小宇cool·2023-10-12 01:02

原生js用鼠标拖动多个div块

实现用鼠标拖动div块的移动，当鼠标点击哪个块时，鼠标移动，div也跟着移动，鼠标松开时，则停止移动Documentdiv{height:200px;width:200px;background-color:red;position:absolute;top:20px;}#d2{top:220px;background-color:aqua;}#d3{top:420px;background-co

zxh.dream·2023-10-11 18:07

原生JS鼠标拖动修改表格的列宽

作者很直男，兄弟们直接复制代码看效果吧！！！一些小细节，大家可以自己动手修改。Documenttable{border-collapse:collapse;width:100%;}123456789123456789123456789123456789//处理第一条边框线的状态varaisDrag=null;varaclick=null;//处理第二条边框线的状态varbisDrag=null;v

ling…·2023-10-11 18:07

原生JS-鼠标拖动

原生JS-鼠标拖动通过鼠标的点击事件通过h5的属性通过鼠标的点击事件步骤：1.鼠标按下div。2.鼠标移动，div跟着移动原生js，实现拖拽效果。

Dormiveglia-flx·2023-10-11 18:04

nvm和node以及npm

一、nvm和node以及npm1、nvm功能：1.下载安装node程序2.切换node版本2.node：是一种服务端程序语言，基于ES为基础创建的一中语言，基础部分就是原生js，没有DOM,BOM和事件

杂草茹·2023-10-11 13:51

day44-jQuery（三）

JQ高级工作中，项目中常用的发送ajax请求的方式：原生js的ajax使用jquery的ajaxfetch-H5内置的请求函数axios-专业发送ajax请求的第三方模块jquery发送ajax请求get

HAI6545·2023-10-10 11:35

Cannot read property 'addEventListener' of null

解决方法：1.等待页面完全加载完了再加载这段Js即可；2.在原生js中的解决方法：1.将脚本放在页面的底部。2.在加载事件中调用

lzrit·2023-10-10 05:22

Vue框架基础

原生js与Vue框架的区别用原生实现双向数据绑定原生你输入了://找到input标签lettxt=document.querySelector('#txt')//给input设置事件,oninput方法

又菜又爱分享的小肖·2023-10-10 04:50

随机气泡案例

最近一直在学习框架，原生js方法及使用忘记的差不多了，温习一下话不多说直接代码*{margin:0;padding:0;}body{overflow:hidden;/*溢出隐藏*//*解决塌陷*//*清除浮动

天上人间一样愁·2023-10-10 03:45

Go语言从入门到精通 -【web项目实战篇】- Json详解

本节核心内容介绍GoLang自带的json包的核心功能方法介绍如何利用Tag对Json结构体实现更多的控制介绍Json的编码器和解码器介绍如何解决复合结构体的数据读取问题介绍了开发中一些常见问题和解决方案介绍了比原生

回首笑人间·2023-10-09 08:14

手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码

一、场景手机移动端-原生js浏览器h5解决识别二维码条形码功能；不借助Hbuilder.需要自己打包成APP，比如用Hbuilder打包，浏览器端项目h5无打包成app部署X不采用不借助微信扫一扫，调用微信

rain丶子厚·2023-10-09 00:51

原生js水波纹特效

Document.btn,.btn2{position:relative;width:150px;height:60px;background:#409eff;outline:0;border:none;padding:12px20px;overflow:hidden;color:#fff;}.btn::before,.btn2::before{content:'';display:block;p

斌斌一棵树·2023-10-09 00:41

原生js实现购物车数据响应驱动+响应式原理

由于本文只关注逻辑的实现代码所以简陋了ui界面但恰好也说明了数据变化的问题可能您的经常使用{computed,watch}vue等框架实现了实时更新的数据变化省去了很多操作，但是本文将带你了解响应原生的实现。示例图假如我们添加了几个商品输入框模拟变化的价格数量，那么在现实的js代码中你是否是通过绑定每个事件对每次商品的加减进行总价的重新计算呢，上代码：Document*{padding:0;mar

专注前端不学习一天浑身难受·2023-10-08 16:05

原生js实现http请求

functionhttpRequest(paramObj,fun,errFun){varxmlhttp=null;/*创建XMLHttpRequest对象，*老版本的InternetExplorer（IE5和IE6）使用ActiveX对象：newActiveXObject("Microsoft.XMLHTTP")**/if(window.XMLHttpRequest){xmlhttp=newXML

Cirosty·2023-10-08 15:13

原生html如何发送网络请求,原生JS发送HTTP请求的方式：XMLHttpRequest.send()

在前端开发过程中，就目前来看，发送HTTP请求，大家习惯在框架里去应用，比如vue,react等。我们在往前追朔下，用的最多的是jQuery里的ajax。但是最原始的发送HTTP请求方式是什么呢？一起了解下~~其实就是XMLHttpRequest.send()。说明XMLHttpRequest.send()方法用于发送HTTP请求。如果是异步请求(默认为异步请求)，则此方法会在请求发送后立即返回；

weixin_39805119·2023-10-08 15:10

原生js全局监听

项目中有时候需要在某些js文件中全局监听//例如给按钮绑定一个事件去开启全局监听触发setMsg(){letparams={id:"_P5NgY6sc_",imgSrc:".....图片路径",};//对document绑定全局监听事件varevent=newCustomEvent("ToOuter",{detail:params,});document.dispatchEvent(event);

橘哥哥·2023-10-07 16:13

解决Ajax跨域问题----JSONP

2、如何实现原生jsonp？3、如何实现jquery--ajax和jsonp？就解决这三个问题一、什么是jsonp？什么是json？因为说jsonp总要和json，很多初学者会产生这样的疑惑。

小伙子太认真·2023-10-07 11:28

原生js之变量、作用域与内存

原生js之变量、作用域与内存变量变量类型原始值引用值复制值传递参数判断类型typeofinstanceof不常用的判断方法constructor构造方法判断Object.getPrototypeOf()

好名字0821·2023-10-07 08:54

原生js之基本引用类型

原生js之基本引用类型引用类型是什么？

好名字0821·2023-10-07 08:22

原生js封装简单的计算器插件

最近闲来无事，想着开发一个小插件，看了网上的一个样例，根据他的代码做了下小的改动，可以直接引入该js文件即可使用，具体js代码如下：window.onload=function(){//创建渲染DOM结构functioncreatDom(){varstr=``;document.getElementById('calculator').innerHTML=str;}creatDom();letse

深漂浪子·2023-10-05 12:13

uniapp 使用echart实战（app/h5/小程序）

准备echarts.min.js在echarts官网按需生成echarts官网地址：https://echarts.apache.org/需要注意的是：在app和h5页面可以直接使用原生js调用echarts

u013040757·2023-10-05 05:17

用html+js+css3实现整屏滚动fullpage功能

最近在jquery库中看到有人封装了整屏滚动(fullpage)的插件，感觉还挺有意思，然后想了一下怎么用原生js实现。本文的实例讲述了原生javascript实现的全屏滚动功能。

俗人844·2023-10-03 22:20

javaScript之原生js封装组件（弹窗为例）

组件封装html调用组件Document.k-dialog{width:30%;z-index:2001;display:block;position:absolute;background:#fff;border-radius:2px;box-shadow:01px3pxrgba(0,0,0,.3);margin:0auto;top:15vh;left:30%;}.k-wrapper{posit

我在人间贩卖青春·2023-10-03 15:35

VUE3学习总结

对于自学过原生js的我来说本来以为学习vue会是一件很简单的事情，但是从目前学习的过程来看小看了vue了。vue3是基于ts语言开发出来的。ts本身可以支持js语言，但是js无法识别ts语言。

万惠清·2023-10-03 09:00

localStorage实现历史记录搜索功能

个人主页：爱吃炫迈系列专栏：JavaScript‍座右铭：道阻且长，行则将至文章目录为什么使用localStorage如何使用localStorage实现历史记录搜索功能（原生JS实现）效果展示代码实现为什么使用

爱吃炫迈·2023-10-02 18:15

数组转化为JSON 、绑定多个事件、队列

//通过原生JSON.stringify/JSON.parse扩展jQuery实现$.array2json=function(array){returnJSON.stringify(array);}$.

潇潇翔子·2023-10-02 09:11

推荐频道

原生ｊｓ