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

autoplay 

indicatorDots 

 indicatorColor

 indicatorActiveColor

 duration

 current

onChange 

 vertical

 onAnimationfinish

附：

中间的新闻就是轮播效果

直接上代码

<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>