提交 8743372d 编写于 作者: DCloud_JSON's avatar DCloud_JSON

更新 示例项目 pull-zoom-image 滚动到底后禁止上拉,优化虚拟滚动惯性

上级 82062827
...@@ -38,19 +38,20 @@ ...@@ -38,19 +38,20 @@
5. 请向上\向下拖动页面观察效果。 5. 请向上\向下拖动页面观察效果。
</text> </text>
</view> </view>
<view class="content-item" v-for="(item,index) in 10" :key="index"> <view class="content-item" v-for="(item,index) in 15" :key="index">
<text class="text">content-{{item}}</text> <text class="text" style="padding-left: 4px;">{{item + 5}}. 占位</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<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; moveIng:boolean = false,
startMoveTime:number = 0;
export default { export default {
data() { data() {
return { return {
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
onReady() { onReady() {
uni.getSystemInfo({ uni.getSystemInfo({
success: (e) => { success: (e) => {
maxScrollTop = 1425 - e.screenHeight maxScrollTop = 1750 - e.screenHeight
} }
}) })
}, },
...@@ -77,13 +78,23 @@ ...@@ -77,13 +78,23 @@
this.setINodeStyle("body", 'transform', `translateY(${this.y})`) this.setINodeStyle("body", 'transform', `translateY(${this.y})`)
}, },
touchstart(e : TouchEvent) { touchstart(e : TouchEvent) {
sY = e.touches[0].screenY; sY = e.touches[0].screenY;
//计时
startMoveTime = 0
}, },
touchmove(e : TouchEvent) { touchmove(e : TouchEvent) {
this.y += e.touches[0].screenY - sY; this.y += e.touches[0].screenY - sY;
dY = e.touches[0].screenY - sY dY = e.touches[0].screenY - sY
sY = e.touches[0].screenY; sY = e.touches[0].screenY;
// 限制滚动到底后上拉
if(this.y < maxScrollTop*-1){
this.y = maxScrollTop*-1
}
this.doMove() this.doMove()
//计时
if(startMoveTime === 0){
startMoveTime = Date.now()
}
}, },
touchend() { touchend() {
// console.log('touchend') // console.log('touchend')
...@@ -91,18 +102,18 @@ ...@@ -91,18 +102,18 @@
return return
} }
moveIng = true moveIng = true
function moveTo(y : number, callback : () => void, speed : number = 10) { function moveTo(y : number, callback : () => void, speed : number = 10,acceleration : number = 0.2) {
let interval : number = 0 let interval : number = 0
let acceleration : number = 1 let _acceleration : number = 1
interval = setInterval(() => { interval = setInterval(() => {
// 加速度 // 加速度
acceleration += 0.2 _acceleration += acceleration
const dy = y - this.y const dy = y - this.y
if (Math.abs(dy) < 1) { if (Math.abs(dy) < 3) {
this.y = y this.y = y
} else { } else {
this.y += dy / speed * acceleration this.y += dy / speed * _acceleration
} }
this.doMove() this.doMove()
...@@ -113,10 +124,14 @@ ...@@ -113,10 +124,14 @@
}, 16) }, 16)
} }
// console.log('dY',dY); // console.log('dY',dY);
console.log('this.y',this.y); // console.log('this.y',this.y);
if(this.y < 0){ if(this.y < 0){
// console.log(dY); let speed:number = dY/(Date.now() - startMoveTime) * 1000
let endY = this.y + dY * 30 let inertia = speed * 3
if( Math.abs(inertia) < 100 ){
inertia = inertia > 0 ? 100 : -100;
}
let endY = this.y + inertia
// 滚动边界限制 // 滚动边界限制
if(endY < maxScrollTop*-1){ if(endY < maxScrollTop*-1){
endY = maxScrollTop*-1 endY = maxScrollTop*-1
...@@ -126,12 +141,10 @@ ...@@ -126,12 +141,10 @@
} }
// console.log('endY',endY); // console.log('endY',endY);
moveTo(endY, () => { moveTo(endY, () => {
// console.log('done');
moveIng = false moveIng = false
},5) },10,0.1)
}else{ }else{
moveTo(0, () => { moveTo(0, () => {
// console.log('done');
moveIng = false moveIng = false
}) })
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册