源码请见附件!
<template>
<view class="content">
<uni-swiper-dot :info="bannerList" :current="current" :dotsStyles="dotsStyles">
<swiper class="swiper-box" @change="change" autoplay="true" circular="true">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image class="swiperitem" mode="widthFix" src="../../static/banner.png"/>
<!-- <image class="swiperitem" mode="scaleToFill" src="../../static/banner.png"/> -->
</swiper-item>
</swiper>
</uni-swiper-dot>
<image class="zhilaizhiwang" src="../../static/Snip20191111_2.png" mode="widthFix"></image>
</view>
</template>
<script>
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
export default {
components: {
uniSwiperDot
},
data() {
return {
bannerList:[0,1,2],
current: 0,
dotsStyles:{
bottom:10,
backgroundColor: 'rgba(255, 255, 255,1)',
border: '1px rgba(255, 255, 255,1) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
}
}
},
onLoad() {
},
methods: {
change(e) {
this.current = e.detail.current
}
}
}
</script>
<style>
.content {
background-color: lightgray;
}
.swiper-box{
/* height: 190px; */
margin-bottom: 10px;
width: 100%;
background-color: green;
/* height: 50vw; */
}
.swiperitem{
width: 100%;
height: 100%;
}
.zhilaizhiwang{
/* margin-top: 10px; */
width: 100%;
margin-bottom: 5px;
}
</style>