Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
8743372d
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
8743372d
编写于
9月 05, 2023
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 示例项目 pull-zoom-image 滚动到底后禁止上拉,优化虚拟滚动惯性
上级
82062827
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
30 addition
and
17 deletion
+30
-17
pages/template/pull-zoom-image/pull-zoom-image.uvue
pages/template/pull-zoom-image/pull-zoom-image.uvue
+30
-17
未找到文件。
pages/template/pull-zoom-image/pull-zoom-image.uvue
浏览文件 @
8743372d
...
@@ -38,19 +38,20 @@
...
@@ -38,19 +38,20 @@
5. 请向上\向下拖动页面观察效果。
5. 请向上\向下拖动页面观察效果。
</text>
</text>
</view>
</view>
<view class="content-item" v-for="(item,index) in 1
0
" :key="index">
<view class="content-item" v-for="(item,index) in 1
5
" :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 = 1
425
- e.screenHeight
maxScrollTop = 1
750
- 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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录