87 lines
1.3 KiB
Vue
87 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="scroll_box">
|
|
<swiper class="swiper" circular="true" vertical="true" display-multiple-items="4" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view class="swiper-item">
|
|
<view class="line1">{{item.nickName}}</view>
|
|
<view class="line2">
|
|
<text>抽到</text>
|
|
<text class="line2-amount">{{item.value}}</text>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: '',
|
|
props: {
|
|
autoplay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
interval: {
|
|
type: Number,
|
|
default: 1000
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
default: 1000
|
|
},
|
|
datalist: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
}
|
|
},
|
|
watch: {
|
|
datalist: {
|
|
immediate: true,
|
|
handler(val) {
|
|
this.list = val
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll_box {
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
|
|
.swiper {
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-item::after {
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
|
|
.swiper-item {
|
|
overflow: auto;
|
|
}
|
|
|
|
.swiper-item .line1 {
|
|
float: left;
|
|
}
|
|
|
|
.swiper-item .line2 {
|
|
float: right;
|
|
}
|
|
|
|
.swiper-item .line2 .line2-amount {
|
|
color: #EF4A4A;
|
|
}
|
|
</style>
|