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.
119 lines
2.3 KiB
119 lines
2.3 KiB
7 months ago
|
<template>
|
||
|
|
<view class="swiper-container">
|
||
|
|
<swiper class="swiper" :indicator-dots="swiperOptions.indicatorDots" :autoplay="swiperOptions.autoplay"
|
||
|
|
:interval="swiperOptions.interval" :duration="swiperOptions.duration" :circular="swiperOptions.circular"
|
||
|
|
>
|
||
|
|
<swiper-item v-for="item in imgList" :key="item.bigImg">
|
||
|
|
<view class="swiper-item">
|
||
|
|
<image :src="$geturl(item.bigImg)"></image>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
<!-- <view class="content" v-if="introduce">
|
||
|
|
<view class="introduce">
|
||
|
|
<u-icon name="volume-up" class="u-icon" size="35"></u-icon>
|
||
|
|
<text>{{ introduce | textSlice }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="digitalIndicator">{{ current + 1 }}/{{ list.length }}</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
props: {
|
||
|
|
imgList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
swiperOptions: {
|
||
|
|
indicatorDots: false,
|
||
|
|
autoplay: true,
|
||
|
|
interval: 2000,
|
||
|
|
duration: 500,
|
||
|
|
circular: true
|
||
|
|
},
|
||
|
|
// current: 0,
|
||
|
|
// introduce: '',
|
||
|
|
// list: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// filters: {
|
||
|
|
// textSlice(value) {
|
||
|
|
// if (value && value.length > 13) {
|
||
|
|
// return value.slice(0, 13) + '...';
|
||
|
|
// }
|
||
|
|
// return value;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
|
||
|
|
// onLoad() {
|
||
|
|
// this.introduce = this.list[0].title;
|
||
|
|
// },
|
||
|
|
methods: {
|
||
|
|
// handleChange(e) {
|
||
|
|
// let {
|
||
|
|
// current
|
||
|
|
// } = e.detail;
|
||
|
|
// this.current = current;
|
||
|
|
// this.introduce = this.list[current].title;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.swiper-container {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
height: 493rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 493rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 67rpx;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 25rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ffffff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 轮播标题
|
||
|
|
.introduce {
|
||
|
|
width: 420rpx;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
border-radius: 23rpx;
|
||
|
|
padding: 13rpx 20rpx 12rpx 10rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.u-icon {
|
||
|
|
margin-right: 7rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.digitalIndicator {
|
||
|
|
width: 80rpx;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
border-radius: 23rpx;
|
||
|
|
padding: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|