图样:
往往我们需要轮播图去显示我们想要的图片之类的
这是工作的代码
<View className='top-title'><SwiperclassName='banner-swiper'interval={3000}circularautoplay>{homeBannerList.map((item) => {return (<SwiperItem key={item.id}><View className='banner-img-view'><Image className='banner-img' src={item.imgSrc} />{item.id === 1 ? null : <View className='navigation-title'>数字化综合服务平台</View>}</View></SwiperItem>)})}</Swiper></View>
我们可以看到使用的属性
interval
切换时间,其实就是大白话,多长时间滚动下一张
circular
circular 默认值为false,你会发现当我们拉到最后一张图片的时候,图片会自动轮播到第一张图片来。
autoplay
是否自动切换
indicatorDots
是否显示面板指示点
indicatorColor
指示点颜色
indicatorActiveColor
当前选中的指示点颜色
duration
滑动动画时长
current
当前所在滑块的 index
onChange
current 改变时会触发 change 事件
vertical
滑动方向是否为纵向
onAnimationfinish
动画结束时会触发 animationfinish 事件
附:
中间的新闻就是轮播效果
直接上代码
<View className='notice-content-view'><View className='trumpet-img-view'><Image className='trumpet-img' src={require('@/src/assets/home/trumpet.png')} /></View><SwiperclassName='notice-swiper'interval={10000}circularautoplay>{noticeList.map((item) => {return (<SwiperItem key={item.id} onClick={this.clickNoticeMore.bind(this, item)}><View className='common-title-view notice-text'>{item.noticeTitle}</View></SwiperItem>)})}</Swiper><View className='right-view'><AtIcon className='chevron-right-view' value='chevron-right' size='16' color='#ccc'></AtIcon></View></View>