Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 48e993db 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

更新 示例项目 pull-zoom-image 向上滚动时，头部图片不缩放，跟随内容移动

上级 365c3afc
隐藏空白更改
内联 并排
Showing with 125 addition and 111 deletion
pages/template/pull-zoom-image/pull-zoom-image.uvue
浏览文件 @ 48e993db
<template>
<view @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view>
<view class="root" @touchstart="touchstart($event as TouchEvent)" @touchmove="touchmove($event as TouchEvent)"
@touchend="touchend" @touchcancel="touchend">
<image class="head-img" ref="head-img" src="../../../static/template/pull-zoom-image/head-img.jpg"
mode="scaleToFill"></image>
<view class="body" ref="body">
<view class="user-info">
<image class="user-avatar" src="../../../static/test-image/logo.png" mode="widthFix"></image>
<view class="font-box">
<text class="username">uni-app-x</text>
<text class="slogan">一次开发，多端覆盖</text>
</view>
</view>
<view class="content">
<view class="content-item">
<text class="text">
1. 当前示例监听了整个页面的touchstart、touchmove、touchend事件 ，实现监听拖动事件。
</text>
</view>
<view class="content-item">
<text class="text">
2. 在拖动事件，使用 ref 直接获取 ref="body" 元素的节点，通过节点的 setProperty 方法来修改 transform的translateY 的值（根据在Y轴方向拖动的距离），从而达到页面跟随手指上下拖动的效果。
</text>
</view>
<view class="content-item">
<text class="text">
3. 在拖动事件，使用 ref 直接获取 ref="head-img" 元素的节点，通过节点的 setProperty 方法来修改 transform的scale 的值（根据在Y轴方向拖动的距离），从而达到手指上下拖动时图片缩放的效果。
</text>
</view>
<view class="content-item">
<text class="text">
4. 在拖动完成事件，通过帧动画，设置上述两个元素回到原来的位置。
</text>
</view>
<view class="content-item">
<text class="text">
5. 请向上\向下拖动页面观察效果。
</text>
</view>
<!-- <view class="content-item" v-for="(item,index) in 6" :key="index">
<text class="text">content-{{item}}</text>
</view> -->
</view>
</view>
</view>
<template>
<view @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view>
<view style="flex:1" @touchstart="touchstart($event as TouchEvent)" @touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
<image class="head-img" ref="head-img" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
<view class="body" ref="body">
<view class="user-info">
<image class="user-avatar" src="../../../static/test-image/logo.png" mode="widthFix"></image>
<view class="font-box">
<text class="username">uni-app-x</text>
<text class="slogan">一次开发，多端覆盖</text>
</view>
</view>
<view class="content">
<view class="content-item">
<text class="text">
1. 当前示例监听了整个页面的touchstart、touchmove、touchend事件 ，实现监听拖动事件。
</text>
</view>
<view class="content-item">
<text class="text">
2. 在拖动事件，使用 ref 直接获取 ref="body" 元素的节点，通过节点的 setProperty 方法来修改 transform的translateY 的值（根据在Y轴方向拖动的距离），从而达到页面跟随手指上下拖动的效果。
</text>
</view>
<view class="content-item">
<text class="text">
3. 在拖动事件，使用 ref 直接获取 ref="head-img" 元素的节点，通过节点的 setProperty 方法来修改 transform的scale 的值（根据在Y轴方向拖动的距离），从而达到手指上下拖动时图片缩放的效果。
</text>
</view>
<view class="content-item">
<text class="text">
4. 在拖动完成事件，通过帧动画，设置上述两个元素回到原来的位置。
</text>
</view>
<view class="content-item">
<text class="text">
5. 请向上\向下拖动页面观察效果。
</text>
</view>
<view class="content-item" v-for="(item,index) in 10" :key="index">
<text class="text">content-{{item}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
let sY : number = 0,
touchstartAfter : boolean = false;
let sY : number = 0,
dY : number = 0,
maxScrollTop:number = 0;
export default {
data() {
return {
$nodeMap: new Map<string, INode>(),
y: 0 as number
y: 0 as number,
scrollTop:0 as number
}
},
onReady() {
uni.getSystemInfo({
success: (e) => {
maxScrollTop = 1425 - e.screenHeight
}
})
},
methods: {
doMove() {
this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
methods: {
doMove() {
// console.log('doMove',this.y);
if(this.y > 0){
this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
}else{
this.setINodeStyle("head-img", 'transform', `translateY(${this.y})`)
}
this.setINodeStyle("body", 'transform', `translateY(${this.y})`)
},
touchstart(e : TouchEvent) {
// console.log('touchstart')
if (this.y !== 0) {
return
}
sY = e.touches[0].screenY;
touchstartAfter = true
},
touchmove(e : TouchEvent) {
// console.log('touchmove')
if (!touchstartAfter) {
return
}
this.y += e.touches[0].screenY - sY;
sY = e.touches[0].screenY;
this.doMove()
this.y += e.touches[0].screenY - sY;
dY = e.touches[0].screenY - sY
sY = e.touches[0].screenY;
this.doMove()
},
touchend() {
// console.log('touchend')
touchstartAfter = false
function moveTo(y : number, callback : () => void, speed : number = 10) {
let interval : number = 0
let acceleration : number = 1
interval = setInterval(() => {
// 加速度
acceleration += 0.2
const dy = y - this.y
if (Math.abs(dy) < 1) {
this.y = y
} else {
this.y += dy / speed * acceleration
}
this.doMove()
if (this.y == y) {
clearInterval(interval)
callback()
}
}, 16)
function moveTo(y : number, callback : () => void, speed : number = 10) {
let interval : number = 0
let acceleration : number = 1
interval = setInterval(() => {
// 加速度
acceleration += 0.2
const dy = y - this.y
if (Math.abs(dy) < 1) {
this.y = y
} else {
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()
if (this.y == y || this.y == maxScrollTop*-1 || this.y == 0) {
clearInterval(interval)
callback()
}
}, 16)
}
// console.log('dY',dY);
if(this.y < 0){
// console.log(dY);
moveTo(this.y + dY * 20, () => {
// console.log('done');
},5)
}else{
const bounceY = (this.y * -0.03).toInt()
// console.log('bounceY', bounceY);
moveTo(bounceY, () => {
moveTo(0, () => {
// console.log('done');
}, 30)
})
}
const bounceY = (this.y * -0.03).toInt()
console.log('bounceY', bounceY);
moveTo(bounceY, () => {
moveTo(0, () => {
console.log('done');
}, 30)
})
},
// 工具方法，用于快速设置 INode 的 style
setINodeStyle(refName : string, propertyName : string, propertyStyle : any) : void {
......@@ -143,21 +162,17 @@
</script>
<style>
.root {
flex: 1;
}
.head-img {
height: 350px;
width: 1000rpx;
/* width: 1000rpx; */
margin-left: -125rpx;
margin-top: -50px;
background-color: #aab8d9;
}
.body {
flex: 1;
margin-top: -200px;
margin-top: -200px;
width: 750rpx;
}
.user-info {
......@@ -191,28 +206,27 @@
.content {
background-color: #FFF;
border-radius: 10px;
flex: 1;
padding: 15px;
padding: 15px;
}
.content-item {
padding: 10px;
margin-bottom: 2px;
padding: 15px;
margin-bottom: 16px;
background-color: #fff;
border-radius: 5px;
border: 1px solid rgba(220, 220, 220, 0.1);
border: 1px solid rgba(220, 220, 220, 0.5);
}
.text {
font-size: 12px;
font-size: 14px;
color: #666;
line-height: 20px;
}
.nav-back {
position: absolute;
top: 20px;
left: 8px;
top: 30px;
left: 10px;
background-color: rgba(220, 220, 220, 0.3);
border-radius: 100px;
width: 28px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或