效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/fa1737e42004420dacd39b60835d345b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pio5aSc5bCP5qW85Y-I56eL6aOO,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
轮播组件jsx
import {Component} from 'react'
import {Swiper, SwiperItem, Image, View} from '@tarojs/components'
import './index.scss'
export default class SwiperBanner extends Component {
static defaultProps = {
list: []
}
state = {
currentIndex:0
}
onChange(e){
this.setState({currentIndex:e.detail.current})
}
render() {
const {list} = this.props
const {currentIndex} = this.state
return (
<View>
<Swiper
className='swiper-body'
indicatorColor='#999'
indicatorActiveColor='#333'
current={currentIndex}
duration={500}
interval={5000}
circular
autoplay
onChange={this.onChange.bind(this)}
>
{list.map((item, index) => (
<SwiperItem key={index}>
<Image src={item} className='slide-image' mode='widthFix' />
</SwiperItem>
))}
</Swiper>
<View className='spot-pagination'>
{list.map((item, index) => (
<View key={index} className={'spot-pagination-bullet ' + ((currentIndex==index)?'spot-pagination-bullet-active':'')}></View>
))}
</View>
</View>
)
}
}
CSS样式
.swiper-body {
height: 200PX;
border-radius: 30px !important;
overflow: hidden;
.slide-image{
height: 180PX;
width: 100%;
border-radius: 30px !important;
overflow: hidden;
}
}
// 指示点样式
.spot-pagination {
margin-top: 10PX;
display: flex;
justify-content: center;
.spot-pagination-bullet{
margin-right: 5PX;
border-radius: 20%;
height: 6PX;
width: 30PX;
background: #ccc
}
// 当前指示点样式
.spot-pagination-bullet-active {
background: orange;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)