Files
guangan-mp/components/i-swiper/i-swiper.vue
2025-06-16 10:09:19 +08:00

70 lines
1.4 KiB
Vue

<template>
<view>
<uni-swiper-dot :info="resdata" :current="current" :dots-styles="dotsStyles">
<swiper :style="'height:'+height+'rpx'" @change="change">
<swiper-item v-for="(item ,index) in resdata" :key="index" class=" overflow-hidden" :class="round?'rounded-lg':''">
<view class="overflow-hidden" :class="round?'rounded-lg':''" @click="toShow(item)">
<image :src="item" :style="'height:'+ height +'rpx'+';width:'+ width +'rpx'" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</view>
</template>
<script>
export default {
name:"iSwiper",
props:{
resdata: {
type: Array,
default() {
return [];
},
},
width:{
type: Number,
default() {
return 0;
},
},
height:{
type: Number,
default() {
return 0;
},
},
round:{
type: Boolean,
default() {
return true;
},
}
},
data() {
return {
current: 0,
dotsStyles: {
backgroundColor: 'rgba(255, 90, 95,0.3)',
border: '1px rgba(255, 90, 95,0.3) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
},
};
},
methods:{
change(e) {
this.current = e.detail.current
},
toShow(item){
this.$emit('click',item)
}
}
}
</script>
<style scoped>
</style>