微信小程序实现图片轮播(原生)

微信小程序实现图片轮播：使用 小程序原生组件swiper和swiper-item来实现。

一、官方文档中swiper和swiper-item的介绍：

Swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

Swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

二、开发实现

效果图

1.index.wxml

图片轮播

<!--pages/index/index.wxml-->
<view class="containerBox">
  <view class="swiperMain">
      <swiper  bindchange="swiperChange"
        indicator-dots="{
   {indicatorDots}}" indicator-color="{
   {indicatorColor}}" autoplay="{
   {autoplay}}" circular="{
   {circular}}" vertical="{
   {vertical}}"
        interval="{
   {interval}}" duration="{
   {duration}}" indicator-active-color="{
   {indicatorActiveColor}}">
        <block wx:for="{
   {tpList}}" wx:for-item="tpTeam" id="{
   {tpTeam.id}}" class="imgClass">
          <swiper-item>
            <image class