Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
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
常超
founder_vue
Commits
0c3afb7e
Commit
0c3afb7e
authored
Nov 11, 2021
by
maxiaohan
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/dev_zwpt' into dev_zwpt
parents
378e78bc
bd69bf36
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
367 additions
and
1 deletions
+367
-1
src/components/swiper.vue
+364
-0
src/views/cxyrd/TT.vue
+3
-1
No files found.
src/components/swiper.vue
0 → 100644
View file @
0c3afb7e
<
template
>
<div>
<transition
name=
"fade"
>
<div
@
touchend=
"end"
@
touchstart=
"start"
@
touchmove=
"move"
class=
"swiper"
>
<div
@
click=
"chooseItem(item, index)"
v-for=
"(item, index) in imgs"
:style=
"config5[index]"
:key=
"item.cover"
>
<img
:src=
"item.cover"
style=
"width: 100%; height: 100%"
/>
</div>
</div>
</transition>
<h1
@
click=
"prev"
>
上一个
</h1>
<h1
@
click=
"next"
>
下一个
</h1>
<h1>
当前:
{{
centerInfo
.
id
}}
</h1>
<h1
@
click=
"chooseItem(item, index)"
v-for=
"(item, index) in imgs"
:key=
"item.cover"
class=
"swperNum"
>
{{
index
}}
</h1>
</div>
</
template
>
<
script
>
export
default
{
name
:
"zt"
,
data
()
{
return
{
loading
:
true
,
currentIndex
:
3
,
//当前中间imgs数组中index
centerInfo
:
""
,
// 当前中间信息
startX
:
""
,
endX
:
""
,
imgs
:
[
{
id
:
"莱因哈特1"
,
index
:
0
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"安娜2"
,
index
:
1
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"卢西奥3"
,
index
:
2
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"DVA4"
,
index
:
3
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"莫伊拉5"
,
index
:
4
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"裂空6"
,
index
:
5
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"麦克雷7"
,
index
:
6
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"士兵76 8"
,
index
:
7
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"狂鼠9"
,
index
:
8
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"死神 10"
,
index
:
9
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"禅雅塔 11"
,
index
:
10
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
{
id
:
"黑百合 12"
,
index
:
11
,
cover
:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf"
,
},
],
previous
:
0
,
config5
:
[
{
id
:
"-A"
,
position
:
"absolute"
,
width
:
"22%"
,
height
:
"72%"
,
top
:
"19.2%"
,
left
:
"20%"
,
opacity
:
0
,
zIndex
:
0
,
transition
:
".4s"
,
},
{
id
:
"A"
,
position
:
"absolute"
,
width
:
"22%"
,
height
:
"72%"
,
top
:
"19.2%"
,
left
:
"17%"
,
opacity
:
1
,
zIndex
:
1
,
transition
:
".4s"
,
},
{
id
:
"B"
,
position
:
"absolute"
,
width
:
"28%"
,
height
:
"82%"
,
top
:
"14%"
,
left
:
"22%"
,
opacity
:
1
,
zIndex
:
2
,
transition
:
".4s"
,
},
{
id
:
"center"
,
position
:
"absolute"
,
width
:
"45%"
,
height
:
"100%"
,
top
:
"0px"
,
left
:
"50%"
,
marginLeft
:
"-22.5%"
,
opacity
:
1
,
zIndex
:
4
,
transition
:
".4s"
,
},
{
id
:
"D"
,
position
:
"absolute"
,
width
:
"28%"
,
height
:
"82%"
,
top
:
"14%"
,
left
:
"50%"
,
opacity
:
1
,
zIndex
:
2
,
transition
:
".4s"
,
},
{
id
:
"E"
,
position
:
"absolute"
,
width
:
"22%"
,
height
:
"72%"
,
top
:
"19.2%"
,
left
:
"60%"
,
opacity
:
1
,
zIndex
:
1
,
transition
:
".4s"
,
},
{
id
:
"E+"
,
position
:
"absolute"
,
width
:
"22%"
,
height
:
"72%"
,
top
:
"19.2%"
,
left
:
"60%"
,
opacity
:
0
,
zIndex
:
0
,
transition
:
".4s"
,
},
],
};
},
methods
:
{
// 获取数据
async
getData
()
{
this
.
$nextTick
(()
=>
{
this
.
loading
=
false
;
});
},
bianhua
(
num
)
{
this
.
currentIndex
=
num
-
1
;
if
(
this
.
currentIndex
>
this
.
imgs
.
length
-
1
)
{
this
.
currentIndex
=
0
;
}
this
.
centerCard
();
this
.
centerIndex
(
"next"
);
},
// 滑动上一个
prev
(
index
)
{
// this.imgs.unshift(this.imgs.pop());
this
.
config5
.
push
(
this
.
config5
.
shift
());
this
.
currentIndex
=
this
.
currentIndex
-
1
;
if
(
this
.
currentIndex
<
0
)
{
this
.
currentIndex
=
this
.
imgs
.
length
-
1
;
}
this
.
centerCard
();
this
.
centerIndex
(
"prev"
);
},
// 滑动下一个
next
()
{
// this.imgs.push(this.imgs.shift());
this
.
config5
.
unshift
(
this
.
config5
.
pop
());
this
.
currentIndex
=
this
.
currentIndex
+
1
;
if
(
this
.
currentIndex
>
this
.
imgs
.
length
-
1
)
{
this
.
currentIndex
=
0
;
}
this
.
centerCard
();
this
.
centerIndex
(
"next"
);
// console.log(this.currentIndex);
},
// 开始移动端滑动屏幕
start
(
event
)
{
this
.
startX
=
event
.
changedTouches
[
0
].
clientX
;
this
.
startY
=
event
.
changedTouches
[
0
].
clientY
;
},
// 连续滑动
move
(
event
)
{
this
.
endY
=
event
.
changedTouches
[
0
].
clientY
;
this
.
endX
=
event
.
changedTouches
[
0
].
clientX
;
this
.
stopDefault
(
event
);
// 如果是滑动,注解(223行到231行)这段。如果是连续滑动,放开(223行到231行)注解
this
.
interval
=
this
.
endX
-
this
.
startX
;
if
(
this
.
interval
>
40
)
{
this
.
startX
=
this
.
endX
;
this
.
prev
();
}
if
(
this
.
interval
<
-
40
)
{
this
.
startX
=
this
.
endX
;
this
.
next
();
}
},
// 滑动
end
(
event
)
{
// 如果是滑动,放开(236行到238行)的注解。如果是连续滑动,注解(236行到238行)
// this.endY = event.changedTouches[0].clientY;
// this.endX = event.changedTouches[0].clientX;
// this.formatSwiper();
},
formatSwiper
()
{
if
(
this
.
startX
>
this
.
endX
)
{
console
.
log
(
"左边滑动"
);
if
(
this
.
startX
>
this
.
endX
+
40
)
{
this
.
next
();
}
}
else
{
console
.
log
(
"右边滑动"
);
if
(
this
.
endX
>
this
.
startX
+
40
)
{
this
.
prev
();
}
}
},
// 阻止touchmove的横向默认事件(ios快捷操作会关闭页面)
stopDefault
(
event
)
{
let
differenceY
=
this
.
endY
-
this
.
startY
;
let
differenceX
=
this
.
endX
-
this
.
startX
;
if
(
Math
.
abs
(
differenceX
)
>
Math
.
abs
(
differenceY
))
{
event
.
preventDefault
();
}
},
// 当前imgs在位置上的index(并非img数组的index)
centerIndex
(
val
)
{
if
(
val
==
"prev"
)
{
for
(
let
val
of
this
.
imgs
)
{
if
(
val
.
index
==
this
.
imgs
.
length
-
1
)
{
val
.
index
=
0
;
}
else
{
val
.
index
=
val
.
index
+
1
;
}
}
}
else
{
for
(
let
val
of
this
.
imgs
)
{
if
(
val
.
index
==
0
)
{
val
.
index
=
this
.
imgs
.
length
-
1
;
}
else
{
val
.
index
=
val
.
index
-
1
;
}
}
}
},
// 点击
chooseItem
(
item
,
index
)
{
let
cycles
=
item
.
index
;
if
(
item
.
index
<
3
)
{
for
(
let
i
=
0
;
i
<
3
-
cycles
;
i
++
)
{
console
.
log
(
item
.
index
);
this
.
prev
();
}
}
else
if
(
item
.
index
>
3
)
{
for
(
let
i
=
-
1
;
i
<
item
.
index
-
3
;
i
++
)
{
this
.
next
();
}
}
else
if
(
item
.
index
==
3
)
{
console
.
log
(
"投票"
);
}
},
// 计算中间卡片信息
centerCard
()
{
this
.
centerInfo
=
this
.
imgs
[
this
.
currentIndex
];
this
.
$emit
(
"centerInfo"
,
this
.
centerInfo
);
},
addCardStyle
()
{
if
(
this
.
imgs
.
length
>
7
)
{
let
addtime
=
this
.
imgs
.
length
-
7
;
for
(
let
i
=
0
;
i
<
addtime
;
i
++
)
{
console
.
log
(
"add"
);
this
.
config5
.
push
({
id
:
"center"
,
position
:
"absolute"
,
width
:
"45%"
,
height
:
"100%"
,
top
:
"0px"
,
left
:
"50%"
,
marginLeft
:
"-22.5%"
,
opacity
:
0
,
transition
:
".1s"
,
});
}
}
},
},
created
()
{
this
.
getData
();
this
.
centerCard
();
// 获取中间卡片信息
this
.
addCardStyle
();
// 加入样式位置的index
},
};
</
script
>
<
style
lang=
"scss"
scoped
>
.swiper
{
width
:
100%
;
border
:
1px
red
solid
;
height
:
400px
;
position
:
relative
;
overflow
:
hidden
;
div
{
opacity
:
0
;
}
}
</
style
>
\ No newline at end of file
src/views/cxyrd/TT.vue
View file @
0c3afb7e
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
<div
class=
"rd-btn"
@
click=
"Rdwc"
>
认定完成
</div>
<div
class=
"rd-btn"
@
click=
"Rdwc"
>
认定完成
</div>
</div>
</div>
</div>
</div>
<Swiper
/>
<div
class=
"main"
>
<div
class=
"main"
>
<div
class=
"data"
>
<div
class=
"data"
>
<!-- 卡片源数据-->
<!-- 卡片源数据-->
...
@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue";
...
@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue";
import
TTFace
from
"./modules/TTFace.vue"
;
import
TTFace
from
"./modules/TTFace.vue"
;
import
Utils
from
"@/utils/util.js"
;
import
Utils
from
"@/utils/util.js"
;
import
"@/icons/error.svg"
;
import
"@/icons/error.svg"
;
import
Swiper
from
'@/components/swiper.vue'
export
default
{
export
default
{
name
:
"TT"
,
name
:
"TT"
,
...
@@ -640,6 +641,7 @@ export default {
...
@@ -640,6 +641,7 @@ export default {
TTFace
,
TTFace
,
swiper
,
swiper
,
swiperSlide
,
swiperSlide
,
Swiper
},
},
data
()
{
data
()
{
return
{
return
{
...
...
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