Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in / Register
Toggle navigation
U
uni-pdtravel
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
panyongping
uni-pdtravel
Commits
b832b12e
Commit
b832b12e
authored
Jun 11, 2024
by
qipeng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
点击滑动替换图片
parent
78b5a4be
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
69 additions
and
20 deletions
+69
-20
main.js
main.js
+2
-0
package.json
package.json
+2
-1
photoJigsaw.vue
pages/album/photoJigsaw/photoJigsaw.vue
+65
-19
No files found.
main.js
View file @
b832b12e
...
@@ -6,6 +6,8 @@ import request from 'common/request.js'
...
@@ -6,6 +6,8 @@ import request from 'common/request.js'
import
'./common/icon/iconfont.css'
import
'./common/icon/iconfont.css'
import
commonjs
from
'common/common.js'
import
commonjs
from
'common/common.js'
Vue
.
prototype
.
$commonjs
=
commonjs
Vue
.
prototype
.
$commonjs
=
commonjs
Vue
.
prototype
.
$request
=
request
Vue
.
prototype
.
$request
=
request
Vue
.
prototype
.
$wxurl
=
'https://lx.pangdly.com/#/'
Vue
.
prototype
.
$wxurl
=
'https://lx.pangdly.com/#/'
...
...
package.json
View file @
b832b12e
...
@@ -12,5 +12,6 @@
...
@@ -12,5 +12,6 @@
},
},
"keywords"
:
[],
"keywords"
:
[],
"author"
:
""
,
"author"
:
""
,
"license"
:
"
ISC
"
"license"
:
"
ISC
"
,
"dependencies"
:
{}
}
}
pages/album/photoJigsaw/photoJigsaw.vue
View file @
b832b12e
...
@@ -6,11 +6,11 @@
...
@@ -6,11 +6,11 @@
我的相片
我的相片
</view>
</view>
<!--图片拼图-->
<!--图片拼图-->
<view
class=
"jigsaw-picture"
>
<view
class=
"jigsaw-picture"
ref=
"jigsawPicture"
>
<image
class=
"picture-backgrounImg"
src=
"https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"
></image>
<image
class=
"picture-backgrounImg"
src=
"https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"
></image>
<template
v-for=
"(item,index) in pictureJigsawPosition"
>
<template
v-for=
"(item,index) in pictureJigsawPosition"
>
<view
class=
"picture-position"
:key=
"index"
@
drop=
"dropFun(event)"
@
dragover=
"allowDrag(event)"
:style=
"
{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
<view
class=
"picture-position"
:key=
"index"
:style=
"
{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
<image
:src=
"item.url"
draggable=
"true"
@
dragstart=
"dragFun(event)
"
></image>
<image
:src=
"item.url"
@
touchstart=
"handleTouchStart($event,index)"
@
touchmove=
"handleTouchMove"
@
touchend=
"handleTouchEnd
"
></image>
</view>
</view>
</
template
>
</
template
>
</view>
</view>
...
@@ -21,6 +21,7 @@
...
@@ -21,6 +21,7 @@
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
screenWidth
:
0
,
//屏幕宽度
statusBarHeight
:
0
,
//状态栏高度
statusBarHeight
:
0
,
//状态栏高度
capsule
:
0
,
// 胶囊大小、位置数据
capsule
:
0
,
// 胶囊大小、位置数据
navHeight
:
0
,
// 导航栏高度
navHeight
:
0
,
// 导航栏高度
...
@@ -33,7 +34,7 @@ export default {
...
@@ -33,7 +34,7 @@ export default {
height
:
'500'
,
height
:
'500'
,
top
:
'200'
,
top
:
'200'
,
left
:
'24'
,
left
:
'24'
,
radius
:
'50'
radius
:
'50'
,
},
},
{
{
url
:
'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg'
,
url
:
'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg'
,
...
@@ -41,21 +42,29 @@ export default {
...
@@ -41,21 +42,29 @@ export default {
height
:
'200'
,
height
:
'200'
,
top
:
'200'
,
top
:
'200'
,
left
:
'340'
,
left
:
'340'
,
radius
:
'8'
radius
:
'8'
,
},
},
{
{
url
:
'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
,
url
:
'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
,
width
:
'400'
,
width
:
'400'
,
height
:
'200'
,
height
:
'200'
,
top
:
'
4
60'
,
top
:
'
5
60'
,
left
:
'340'
,
left
:
'340'
,
radius
:
'16'
radius
:
'16'
,
},
},
],
],
transpositionStartMes
:{},
transpositionStartIndex
:
0
,
}
}
},
},
onLoad
(
option
)
{
onLoad
(
option
)
{
this
.
recordDeviceInfo
()
//记录设备信息
this
.
recordDeviceInfo
()
//记录设备信息
//获取当前view的宽度
const
query
=
uni
.
createSelectorQuery
().
in
(
this
)
query
.
select
(
'.jigsaw-picture'
).
boundingClientRect
(
res
=>
{
this
.
screenWidth
=
res
.
width
}).
exec
()
},
},
methods
:
{
methods
:
{
recordDeviceInfo
()
{
//---记录设备信息
recordDeviceInfo
()
{
//---记录设备信息
...
@@ -69,20 +78,49 @@ export default {
...
@@ -69,20 +78,49 @@ export default {
delta
:
1
delta
:
1
})
})
},
},
//图片拖动
//基础换位逻辑
allowDrag
(
ev
){
//1.获取当前位置。确定开始位置的图片值
console
.
log
(
'123'
)
//2.获取终点位置
ev
.
preventDefault
()
//3.循环终点位置。确实终点位置是否再开始位置,若不在,则将开始位置和终点位置图片互换
handleTouchMove
(
event
)
{
},
handleTouchStart
(
event
,
index
)
{
//changedTouches[0] pageX横向 pageY属相
this
.
transpositionStartMes
=
event
.
changedTouches
[
0
]
this
.
transpositionStartIndex
=
index
},
},
dragFun
(
ev
){
handleTouchEnd
(
event
)
{
//点击图片是否切换
console
.
log
(
'456'
)
//距离头部高度
ev
.
dataTransfer
.
setData
(
'Text'
,
ev
.
target
.
id
)
var
navHeight
=
this
.
pxToRpx
(
this
.
albumBoxTop
)
//获取终点位置
var
endEvent
=
event
.
changedTouches
[
0
]
//参数重组 将参数从当前参数转换为 750rpx的数值
var
newScale
=
endEvent
.
pageX
/
this
.
screenWidth
*
750
//换算 满宽在哪
var
newRemain
=
(
endEvent
.
pageY
-
navHeight
)
/
this
.
screenWidth
*
750
//换算 满宽在哪 pageY-navHeight 当前手指位置-导航栏高度 为现在手指再DIV内的高度
endEvent
.
pageX
=
newScale
endEvent
.
pageY
=
newRemain
//循环是否在某个元素框里面
var
newInIndex
=
null
this
.
pictureJigsawPosition
.
forEach
((
item
,
index
)
=>
{
var
overWidth
=
parseInt
(
item
.
width
)
+
parseInt
(
item
.
left
)
var
overHeight
=
parseInt
(
item
.
height
)
+
parseInt
(
item
.
top
)
if
(
endEvent
.
pageX
>=
item
.
left
&&
endEvent
.
pageX
<=
overWidth
&&
endEvent
.
pageY
>=
item
.
top
&&
endEvent
.
pageY
<=
overHeight
){
newInIndex
=
index
}
})
//确定进入其他元素框内时 图片对换
if
(
this
.
transpositionStartIndex
!==
newInIndex
&&
newInIndex
!==
null
){
var
indexOne
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
pictureJigsawPosition
[
this
.
transpositionStartIndex
].
url
))
var
indexNew
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
pictureJigsawPosition
[
newInIndex
].
url
))
this
.
pictureJigsawPosition
[
this
.
transpositionStartIndex
].
url
=
JSON
.
parse
(
JSON
.
stringify
(
indexNew
))
this
.
pictureJigsawPosition
[
newInIndex
].
url
=
JSON
.
parse
(
JSON
.
stringify
(
indexOne
))
}
console
.
log
(
this
.
$refs
.
jigsawPicture
)
},
},
dropFun
(
ev
){
// px转rpx 将头部导航栏PX转换为RPX
console
.
log
(
'789'
)
pxToRpx
(
px
)
{
ev
.
preventDefault
()
//计算比例
var
data
=
ev
.
dataTransfer
.
getData
(
'Text'
)
let
scale
=
uni
.
upx2px
(
100
)
/
100
ev
.
target
.
appendChild
(
document
.
getElementById
(
data
))
return
px
/
scale
},
},
}
}
}
}
...
@@ -127,5 +165,13 @@ export default {
...
@@ -127,5 +165,13 @@ export default {
overflow
:
auto
;
overflow
:
auto
;
position
:
absolute
;
position
:
absolute
;
}
}
.picture-positionBox
{
width
:
750rpx
;
height
:
1100rpx
;
position
:
absolute
;
top
:
0
;
left
:
0
;
}
}
}
</
style
>
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment