You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
4 months ago
|
<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)">
|
||
|
|
<image class="slide-image" mode="aspectFill" :src="item"></image>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
<view class="banner-num">
|
||
|
|
<text>{{ currentIndex }}</text>
|
||
|
|
<text>/</text>
|
||
|
|
<text>{{ images.length }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
images: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
indicatorDots: true, // 是否显示面板指示点
|
||
|
|
autoplay: true, // 是否自动切换
|
||
|
|
interval: 3000, // 自动切换时间间隔
|
||
|
|
duration: 800, // 滑动动画时长
|
||
|
|
currentIndex: 1 // 轮播图指针
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 设置轮播图当前指针 数字
|
||
|
|
setCurrent(e) {
|
||
|
|
const app = this
|
||
|
|
app.currentIndex = e.detail.current + 1
|
||
|
|
},
|
||
|
|
|
||
|
|
// 浏览商品图片
|
||
|
|
onPreviewImages(index) {
|
||
|
|
const app = this
|
||
|
|
const imageUrls = []
|
||
|
|
app.images.forEach(item => {
|
||
|
|
imageUrls.push(item);
|
||
|
|
});
|
||
|
|
uni.previewImage({
|
||
|
|
current: imageUrls[index],
|
||
|
|
urls: imageUrls
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
// swiper组件
|
||
|
|
.swiper-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vw;
|
||
|
|
|
||
|
|
.slide-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0rpx;
|
||
|
|
padding: 0rpx;
|
||
|
|
display: block;
|
||
|
|
border-radius: 1rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* banner计数 */
|
||
|
|
.banner-num {
|
||
|
|
position: absolute;
|
||
|
|
right: 30rpx;
|
||
|
|
margin-top: -70rpx;
|
||
|
|
padding: 2rpx 18rpx;
|
||
|
|
background: rgba(0, 0, 0, 0.363);
|
||
|
|
border-radius: 50rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
</style>
|