本来想想将轮播封装一下,但是自己太懒了,就不去封装了。
用的uni-app视图容器中的 swiper组件
<template>
<view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper"
:indicator-color="ponitcolor"
:indicator-active-color="currentcolor"
:circular="zidongxianjie"
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red my-uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green my-uni-bg-b">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue my-uni-bg-c">C</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
zidongxianjie:true,//自动衔接,
background: ['color1', 'color2', 'color3'],
indicatorDots: true,//是否显示面板指示点 就是下面那个小圆点
autoplay: true,//是否自动播放
ponitcolor:"#fff",//指示点的颜色
currentcolor:"red",//当前指示点颜色
interval: 2000,
duration: 500,
}
}
}
</script>
<style scoped>
.my-uni-bg-red{
background: hotpink;
height: 300upx;
}
.my-uni-bg-b{
background: palegoldenrod;
height: 300upx;
}
.my-uni-bg-c{
background: peru;
height: 300upx;
}
</style>