taro之Swiper的使用

图样：

往往我们需要轮播图去显示我们想要的图片之类的

 这是工作的代码

<View className='top-title'>
          <Swiper
            className='banner-swiper'
            interval={3000}
            circular
            autoplay
          >
              {
              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>
          <Swiper
            className='notice-swiper'
            interval={10000}
            circular
            autoplay
          >
            {
            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>