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

新增 示例项目 pull-zoom-image

上级 e95542da
...@@ -354,18 +354,18 @@ ...@@ -354,18 +354,18 @@
"navigationBarTitleText": "box-shadow" "navigationBarTitleText": "box-shadow"
} }
}, },
{ {
"path" : "pages/CSS/display/flex", "path": "pages/CSS/display/flex",
"style" : { "style": {
"navigationBarTitleText": "display:flex" "navigationBarTitleText": "display:flex"
} }
}, },
{ {
"path" : "pages/CSS/display/none", "path": "pages/CSS/display/none",
"style" : { "style": {
"navigationBarTitleText": "display:none" "navigationBarTitleText": "display:none"
} }
}, },
{ {
"path": "pages/CSS/flex/align-content", "path": "pages/CSS/flex/align-content",
"style": { "style": {
...@@ -558,12 +558,12 @@ ...@@ -558,12 +558,12 @@
"navigationBarTitleText": "font-weight" "navigationBarTitleText": "font-weight"
} }
}, },
{ {
"path": "pages/CSS/text/letter-spacing", "path": "pages/CSS/text/letter-spacing",
"style": { "style": {
"navigationBarTitleText": "letter-spacing" "navigationBarTitleText": "letter-spacing"
} }
}, },
{ {
"path": "pages/CSS/text/line-height", "path": "pages/CSS/text/line-height",
"style": { "style": {
...@@ -678,12 +678,12 @@ ...@@ -678,12 +678,12 @@
"navigationBarTitleText": "图片预览" "navigationBarTitleText": "图片预览"
} }
}, },
{ {
"path": "pages/API/save-image-to-album/save-image-to-album", "path": "pages/API/save-image-to-album/save-image-to-album",
"style": { "style": {
"navigationBarTitleText": "保存图片到相册" "navigationBarTitleText": "保存图片到相册"
} }
}, },
{ {
"path": "pages/component/scroll-view/scroll-view-refresher", "path": "pages/component/scroll-view/scroll-view-refresher",
"style": { "style": {
...@@ -834,8 +834,15 @@ ...@@ -834,8 +834,15 @@
"style": { "style": {
"navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例" "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例"
} }
},
{
"path": "pages/template/pull-zoom-image/pull-zoom-image",
"style": {
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
"pageOrientation": "portrait", "pageOrientation": "portrait",
"navigationBarTitleText": "Hello uniapp x", "navigationBarTitleText": "Hello uniapp x",
...@@ -850,8 +857,7 @@ ...@@ -850,8 +857,7 @@
"selectedColor": "#007AFF", "selectedColor": "#007AFF",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8",
"list": [ "list": [{
{
"pagePath": "pages/tabBar/component", "pagePath": "pages/tabBar/component",
"iconPath": "static/component.png", "iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png", "selectedIconPath": "static/componentHL.png",
...@@ -880,12 +886,10 @@ ...@@ -880,12 +886,10 @@
"condition": { "condition": {
//模式配置,仅开发期间生效 //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项) "current": 0, //当前激活的模式(list 的索引项)
"list": [ "list": [{
{ "name": "", //模式名称
"name": "", //模式名称 "path": "", //启动页面,必选
"path": "", //启动页面,必选 "query": "" //启动参数,在页面的onLoad函数里面得到
"query": "" //启动参数,在页面的onLoad函数里面得到 }]
}
]
} }
} }
...@@ -115,7 +115,6 @@ export default { ...@@ -115,7 +115,6 @@ export default {
url: 'pull-zoom-image', url: 'pull-zoom-image',
name: '下拉缩放顶部封面图', name: '下拉缩放顶部封面图',
open: false, open: false,
enable: false,
pages: [] as Page[], pages: [] as Page[],
}, },
{ {
......
<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>
<script>
let sY : number = 0,
touchstartAfter : boolean = false;
export default {
data() {
return {
$nodeMap: new Map<string, INode>(),
y: 0 as number
}
},
methods: {
doMove() {
this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
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()
},
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)
}
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 {
let node : INode | null = this.$nodeMap.get(refName)
if (node == null) {
node = this.$refs.get(refName) as INode;
this.$nodeMap.set(refName, node)
} else {
// console.log('直接拿');
}
node?.style?.setProperty(propertyName, propertyStyle);
},
back() {
uni.navigateBack({
success(result) {
console.log('navigateBack success', result.errMsg)
},
fail(error) {
console.log('navigateBack fail', error.errMsg)
},
complete(result) {
console.log('navigateBack complete', result.errMsg)
}
})
}
}
}
</script>
<style>
.root {
flex: 1;
}
.head-img {
height: 350px;
width: 1000rpx;
margin-left: -125rpx;
margin-top: -50px;
background-color: #aab8d9;
}
.body {
flex: 1;
margin-top: -200px;
}
.user-info {
padding: 15px;
flex-direction: row;
}
.user-avatar {
width: 150rpx;
height: 150rpx;
border-radius: 100px;
border: 3px solid #FFF;
}
.font-box {
flex-direction: column;
justify-content: space-around;
padding: 10px;
}
.username {
font-size: 26px;
color: #FFF;
}
.slogan {
font-size: 16px;
color: #FFF;
}
.content {
background-color: #FFF;
border-radius: 10px;
flex: 1;
padding: 15px;
}
.content-item {
padding: 10px;
margin-bottom: 2px;
background-color: #fff;
border-radius: 5px;
border: 1px solid rgba(220, 220, 220, 0.1);
}
.text {
font-size: 12px;
color: #666;
line-height: 20px;
}
.nav-back {
position: absolute;
top: 20px;
left: 8px;
background-color: rgba(220, 220, 220, 0.3);
border-radius: 100px;
width: 28px;
height: 28px;
justify-content: center;
align-items: center;
z-index: 10;
}
.nav-back .back-img {
width: 18px;
height: 18px;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册