当前位置: 首页 > 科技观察

js模拟手机页面文件下拉刷新

时间:2023-03-12 16:05:05 科技观察

老大说需要这个功能,那就看看相关的东西吧。***创建了一个简单的下拉刷新页面的形式,不太复杂。查看demo需要模拟器才能看到效果,比如chrome(或者用手机浏览器查看,但是测试发现部分浏览器有问题,目前手机猎豹是没有问题的)主要是:下拉——>提示释放刷新-->释放后-->开始刷新-->刷新成功后恢复html,css部分styletype="text/css">#slideDown{margin-top:0;width:100%;}#slideDown1,#slideDown2{width:100%;height:70px;;背景:#e9f4f7;display:none;}#slideDown1{height:20px;}#slideDown1>p,#slideDown2>p{margin:20pxauto;text-align:center;font-size:14px;color:#37bbf5;}

松开刷新

正在刷新...

js部分:主要是为一个节点绑定事件,可以是整个body根据实际来看,k_touch()函数才是主要代码。目前主要涉及到三个事件,touchstarttouchmovetouchend这里使用pageX和pageY获取触摸点的坐标。way,其实通过这个控件,无论是获取pageX还是pageY,直接滑动就可以看到dist的变化。其实也可以看成是px。更多的功能,后面再说..尾巴一摆就是一个季节!