You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.3 KiB
105 lines
2.3 KiB
<template> |
|
<view> |
|
<page-head title="swiper,可滑动视图"></page-head> |
|
<view class="uni-margin-wrap"> |
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> |
|
<swiper-item> |
|
<view class="swiper-item uni-bg-red">A</view> |
|
</swiper-item> |
|
<swiper-item> |
|
<view class="swiper-item uni-bg-green">B</view> |
|
</swiper-item> |
|
<swiper-item> |
|
<view class="swiper-item uni-bg-blue">C</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
<view class="swiper-list"> |
|
<view class="uni-list-cell uni-list-cell-pd"> |
|
<view class="uni-list-cell-db">指示点</view> |
|
<switch :checked="indicatorDots" @change="changeIndicatorDots" /> |
|
</view> |
|
<view class="uni-list-cell uni-list-cell-pd"> |
|
<view class="uni-list-cell-db">自动播放</view> |
|
<switch :checked="autoplay" @change="changeAutoplay" /> |
|
</view> |
|
</view> |
|
|
|
<view class="uni-padding-wrap"> |
|
<view class="uni-common-mt"> |
|
<text>幻灯片切换时长(ms)</text> |
|
<text class="info">{{duration}}</text> |
|
</view> |
|
<slider @change="durationChange" :value="duration" min="500" max="2000" /> |
|
<view class="uni-common-mt"> |
|
<text>自动播放间隔时长(ms)</text> |
|
<text class="info">{{interval}}</text> |
|
</view> |
|
<slider @change="intervalChange" :value="interval" min="2000" max="10000" /> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
background: ['color1', 'color2', 'color3'], |
|
indicatorDots: true, |
|
autoplay: true, |
|
interval: 2000, |
|
duration: 500 |
|
} |
|
}, |
|
methods: { |
|
changeIndicatorDots(e) { |
|
this.indicatorDots = !this.indicatorDots |
|
}, |
|
changeAutoplay(e) { |
|
this.autoplay = !this.autoplay |
|
}, |
|
intervalChange(e) { |
|
this.interval = e.detail.value |
|
}, |
|
durationChange(e) { |
|
this.duration = e.detail.value |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.uni-margin-wrap { |
|
width:690rpx; |
|
width: 100%;; |
|
} |
|
.swiper { |
|
height: 300rpx; |
|
} |
|
.swiper-item { |
|
display: block; |
|
height: 300rpx; |
|
line-height: 300rpx; |
|
text-align: center; |
|
} |
|
|
|
.swiper-list { |
|
margin-top: 40rpx; |
|
margin-bottom: 0; |
|
} |
|
|
|
.uni-common-mt{ |
|
margin-top:60rpx; |
|
position:relative; |
|
} |
|
|
|
.info { |
|
position: absolute; |
|
right:20rpx; |
|
} |
|
|
|
.uni-padding-wrap { |
|
width:550rpx; |
|
padding:0 100rpx; |
|
} |
|
</style>
|
|
|