cubic-bezier处理下拉和回弹

待我称王封你为后i 2023-02-23 10:52 6阅读 0赞

![d51d6322025428f35a25e0e3d92a10da.png][]

\*  下拉和回弹  
\*  1.关闭bounce避免ios端下拉冲突  
\*  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉  
\*    transition设置0.1秒延迟，让css来过渡这段空窗期  
\*  3.回弹效果可修改曲线值来调整效果，推荐好用的bezier[生成工具][Link 1] 及[模板][Link 2]

<script>
    	let startY = 0,
    	    moveY = 0,
    	    pageAtTop = true;
    	export default {
    		data() {
    			return {
    			   coverTransform: 'translateY(0px)',
    			   coverTransition: '0s',
    			   moving: false,
    			}
    		}
    		methods: {
    			coverTouchstart(e) {
    				if (pageAtTop === false) {
    					return;
    				}
    				this.coverTransition = 'transform .1s linear';
    				startY = e.touches[0].clientY;
    			},
    			coverTouchmove(e) {
    				moveY = e.touches[0].clientY;
    				let moveDistance = moveY - startY;
    				if (moveDistance < 0) {
    					this.moving = false;
    					return;
    				}
    				this.moving = true;
    				if (moveDistance >= 80 && moveDistance < 100) {
    					moveDistance = 80;
    				}
    				if (moveDistance > 0 && moveDistance <= 80) {
    					this.coverTransform = `translateY(${moveDistance}px)`;
    				}
    			},
    			coverTouchend() {
    				if (this.moving === false) {
    					return;
    				}
    				this.moving = false;
    				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
    				this.coverTransform = 'translateY(0px)';
    			}
    
    		}
    	}
    </script>

[d51d6322025428f35a25e0e3d92a10da.png]: https://img-blog.csdnimg.cn/img_convert/d51d6322025428f35a25e0e3d92a10da.png
[Link 1]: http://yisibl.github.io/cubic-bezier/#.17,.67,.88,.53
[Link 2]: http://web.chacuo.net/css3beziertool/

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关实现Android开发中ListView下拉回弹刷新功能

在Android应用开发中，经常需要使用ListView来展示数据列表。为了提升用户体验，我们可以实现ListView下拉回弹刷新的功能，使得用户可以通过下拉列表来刷新数据。下

你的名字/ 2024年02月25日 04:42/ 0 赞/ 68 阅读

相关 js上拉下拉回弹

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

雨点打透心脏的1/2处/ 2023年06月15日 11:23/ 0 赞/ 9 阅读

相关 layui 下拉回显

var isEnable=$("isEnable").val();//获取回显的值, console.log("isEnable---"+isEnable)

水深无声/ 2023年02月23日 12:13/ 0 赞/ 20 阅读

相关 cubic-bezier处理下拉和回弹

![d51d6322025428f35a25e0e3d92a10da.png][] \ 下拉和回弹 \ 1.关闭bounce避免ios端下拉冲突 \ 2.由于t

待我称王封你为后i/ 2023年02月23日 10:52/ 0 赞/ 7 阅读

相关 android组件的下拉回弹,实现一个带下拉弹簧动画的 ScrollView

原标题：实现一个带下拉弹簧动画的 ScrollView 在 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画，也就是弹簧

深藏阁楼爱情的钟/ 2022年10月16日 05:49/ 0 赞/ 8 阅读

相关 android下拉弹出框

Spinner s = (Spinner) findViewById(R.id.spinner); ArrayAdapter<String> a

Myth丶恋晨/ 2022年08月18日 12:12/ 0 赞/ 231 阅读

相关简单下拉框选项回显

<td> <label style="width:100px">是否邮件确认：</label> </td> <td> <

柔情只为你懂/ 2022年07月14日 13:15/ 0 赞/ 270 阅读

相关 jquery 下拉弹出菜单

<!doctype html> <html lang="en"> <head> <meta charset

红太狼/ 2022年07月14日 06:50/ 0 赞/ 252 阅读

相关 mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug

模版 <body> <header class="mui-bar mui-bar-nav"> <a cla

淩亂°似流年/ 2022年06月07日 05:37/ 0 赞/ 128 阅读

相关欧拉回路和欧拉道路

即一笔画问题。起点和终点相同称为回路，否则称为道路欧拉回路或道路存在判定无向图联通,有0个或2个奇点(度为奇数)。如果有两个奇点，则必须从一个奇点出发

墨蓝/ 2022年05月09日 05:36/ 0 赞/ 287 阅读