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.
108 lines
1.8 KiB
108 lines
1.8 KiB
<template>
|
|
<!-- 商品图片 -->
|
|
<view class="images-swiper">
|
|
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration"
|
|
:indicator-dots="indicatorDots" :interval="interval" :circular="true"
|
|
@change="setCurrent">
|
|
<!-- 轮播图片 -->
|
|
<swiper-item v-for="(item, index) in images" :key="index"
|
|
@click="onPreviewImages(index)" >
|
|
<view class="slide-image">
|
|
<image class="image" :draggable="false" :src="item"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 图片轮播
|
|
images: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
indicatorDots: true, // 是否显示面板指示点
|
|
autoplay: true, // 是否自动切换
|
|
interval: 4000, // 自动切换时间间隔
|
|
duration: 800, // 滑动动画时长
|
|
currentIndex: 1, // 轮播图指针
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
// 设置轮播图当前指针 数字
|
|
setCurrent({ detail }) {
|
|
this.currentIndex = detail.current + 1;
|
|
},
|
|
|
|
// 浏览商品图片
|
|
onPreviewImages(index) {
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: this.images,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// swiper组件
|
|
.images-swiper {
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-box {
|
|
width: 100%;
|
|
height: 100vw;
|
|
|
|
/* #ifdef H5 */
|
|
max-width: 480px;
|
|
max-height: 480px;
|
|
margin: 0 auto;
|
|
/* #endif */
|
|
|
|
// 主图视频
|
|
.slide-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 图片轮播
|
|
.slide-image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// swiper计数
|
|
.swiper-count {
|
|
position: absolute;
|
|
right: 36rpx;
|
|
bottom: 72rpx;
|
|
padding: 2rpx 18rpx;
|
|
background: rgba(0, 0, 0, 0.363);
|
|
border-radius: 50rpx;
|
|
color: $color-grey0;
|
|
font-size: 26rpx;
|
|
}
|
|
</style>
|