提交 518198bf 编写于 作者: DCloud_JSON's avatar DCloud_JSON

修复 示例项目 pull-zoom-image 动画丢失的问题

上级 80990e26
...@@ -49,7 +49,8 @@ ...@@ -49,7 +49,8 @@
<script> <script>
let sY : number = 0, let sY : number = 0,
dY : number = 0, dY : number = 0,
maxScrollTop:number = 0; maxScrollTop:number = 0,
moveIng:boolean = false;
export default { export default {
data() { data() {
return { return {
...@@ -86,6 +87,10 @@ ...@@ -86,6 +87,10 @@
}, },
touchend() { touchend() {
// console.log('touchend') // console.log('touchend')
if(moveIng){
return
}
moveIng = true
function moveTo(y : number, callback : () => void, speed : number = 10) { function moveTo(y : number, callback : () => void, speed : number = 10) {
let interval : number = 0 let interval : number = 0
let acceleration : number = 1 let acceleration : number = 1
...@@ -100,16 +105,6 @@ ...@@ -100,16 +105,6 @@
this.y += dy / speed * acceleration this.y += dy / speed * acceleration
} }
// 滚动边界限制
if(this.y < maxScrollTop*-1){
this.y = maxScrollTop*-1
}
if(this.y > 0){
this.y = 0
}
// console.log('this.y',this.y);
this.doMove() this.doMove()
if (this.y == y || this.y == maxScrollTop*-1 || this.y == 0) { if (this.y == y || this.y == maxScrollTop*-1 || this.y == 0) {
clearInterval(interval) clearInterval(interval)
...@@ -118,18 +113,26 @@ ...@@ -118,18 +113,26 @@
}, 16) }, 16)
} }
// console.log('dY',dY); // console.log('dY',dY);
console.log('this.y',this.y);
if(this.y < 0){ if(this.y < 0){
// console.log(dY); // console.log(dY);
moveTo(this.y + dY * 20, () => { let endY = this.y + dY * 30
// 滚动边界限制
if(endY < maxScrollTop*-1){
endY = maxScrollTop*-1
}
if(endY > 0){
endY = 0
}
// console.log('endY',endY);
moveTo(endY, () => {
// console.log('done'); // console.log('done');
moveIng = false
},5) },5)
}else{ }else{
const bounceY = (this.y * -0.03).toInt() moveTo(0, () => {
// console.log('bounceY', bounceY); // console.log('done');
moveTo(bounceY, () => { moveIng = false
moveTo(0, () => {
// console.log('done');
}, 30)
}) })
} }
}, },
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册