Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-frontM
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
云深项目组
beyond-clouds-frontM
Commits
5fbd92f7
Commit
5fbd92f7
authored
Mar 11, 2020
by
yanju
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加轮播图
parent
fc34f02f
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
227 additions
and
0 deletions
+227
-0
components/moblie/banner.vue
+227
-0
No files found.
components/moblie/banner.vue
0 → 100644
View file @
5fbd92f7
<
template
>
<div
class=
"banner-card__wrap"
>
<yun-div
>
<!-- banner-card1-->
<yun-div
:width-v=
"750"
:height-v=
"300"
v-swipeleft=
"clickToGetNextPic"
v-swiperight=
"clickToGetPrePic"
v-if=
"bannerType===1"
>
<a
:href=
"linkArr[currentImg]"
target=
"_blank"
style=
"width:100%;height:100%"
>
<yun-img
:ske-h=
"300"
:ske-w=
"750"
:src=
"imgArr[currentImg]"
:style=
"
{opacity:imgOpacity}" alt="" >
</yun-img>
</a>
<yun-div
:extend-style=
"
{
position:'absolute',
}"
:position-v="[undefined,undefined,16,undefined]"
width-v="100%"
:margin-v="[0,'auto']"
:flex-v="['row','center','center']"
>
<yun-div
v-for=
" (val,index) in imgArr"
:key=
"index"
v-tap=
"()=>clickToPointPic(index)"
:bg-color-v=
"index===currentImg?'#fff':'rgba(255,255,255,.4)'"
:border-r=
"[2,2,0,0]"
:width-v=
"16"
:height-v=
"4"
:margin-v=
"[0,5]"
></yun-div>
</yun-div>
</yun-div>
<!-- banner-card2-->
<yun-div
v-if=
"bannerType===2"
:width-v=
"704"
:margin-v=
"[0,'auto']"
>
<yun-div
:width-v=
"704"
bg-color-v=
"#BDBCD1"
:border-r=
"[4]"
:flex-v=
"['row','center','center']"
v-swipeleft=
"clickToGetNextPic"
v-swiperight=
"clickToGetPrePic"
>
<yun-img
:width-v=
"704"
height-v=
"auto"
:ske-w=
"704"
:ske-h=
"300"
:src=
"imgArr[currentImg]"
>
</yun-img>
</yun-div>
<yun-div
:extend-style=
"
{
overflowX:'scroll',
}"
:flex-v="['row','flex-start','center']"
>
<yun-div
:width-v=
"80"
:height-v=
"80"
:border-r=
"[4]"
:border-v=
"[1,'solid',index===currentImg?'#00AAE6':'transparent']"
:extend-style=
"
{
opacity: index===currentImg?1:0.6
}"
:no-flex-shrink="true"
:flex-v="['column','center','center']"
:margin-v="[16,6,0,0]"
v-for=" (val,index) in imgArr"
:key="val+index"
v-tap="()=>clickToPointPic(index)"
>
<yun-img
:style=
"
{
maxWidth:'100%',
maxHeight:'100%',
}"
:src="val"
:ske-h="80"
:ske-w="80"
>
</yun-img>
</yun-div>
</yun-div>
</yun-div>
</yun-div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'banner'
,
props
:{
imgArr
:{
default
:()
=>
([
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg'
,
]),
type
:
Array
},
linkArr
:{
default
:()
=>
([]),
type
:
Array
},
playTime
:{
default
:
3000
,
type
:
Number
},
bannerType
:{
default
:
1
,
type
:
Number
},
autoPlay
:{
default
:
true
,
type
:
Boolean
},
currentImg2
:{
default
:
0
,
type
:
Number
},
},
data
(){
return
{
imgSrc
:
''
,
imgOpacity
:
1
,
opacityTime
:
500
,
bannerTimer
:
null
,
currentImg
:
0
,
}
},
watch
:{
},
mounted
(){
this
.
currentImg
=
this
.
currentImg2
;
this
.
initBanner
();
},
methods
:{
//初始化轮播图
initBanner
(){
clearInterval
(
this
.
bannerTimer
)
if
(
this
.
autoPlay
){
this
.
bannerTimer
=
setInterval
(()
=>
{
let
{
imgArr
,
currentImg
}
=
this
;
let
length
=
imgArr
.
length
;
if
(
currentImg
<
length
-
1
){
this
.
currentImg
=
currentImg
+
1
;
}
else
{
this
.
currentImg
=
0
;
}
},
this
.
playTime
)
}
},
//点击到下一张轮播图
clickToGetNextPic
(){
let
{
currentImg
}
=
this
;
let
length
=
this
.
imgArr
.
length
;
if
(
currentImg
<
length
-
1
){
this
.
currentImg
=
currentImg
+
1
;
}
else
{
this
.
currentImg
=
0
;
}
this
.
initBanner
();
},
//点击到上一张轮播图
clickToGetPrePic
(){
let
{
currentImg
}
=
this
;
let
length
=
this
.
imgArr
.
length
;
if
(
currentImg
>
0
){
this
.
currentImg
=
currentImg
-
1
;
}
else
{
this
.
currentImg
=
length
-
1
;
}
this
.
initBanner
();
},
//点击到指定轮播图
clickToPointPic
(
index
){
this
.
currentImg
=
index
;
this
.
initBanner
()
},
}
}
</
script
>
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