支付宝小程序Swiper 滚动图带圆点和跳转方式

axml结构

<!-- 滚动图 -->
<view class="swiper" style="position:relative">
	<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">
        <block a:for="{{swiperList}}">
          <swiper-item class="swiper-box">
            <view class="swiper-item" style="width:100%;height:300rpx">
                <!-- lazy-load根据需要 onTap可以点击图片跳转 data-url绑定到跳转的链接-->
              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flex;width:100%;height:300rpx" 
                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />
            </view>
          </swiper-item>
        </block>
      </swiper>
    <!-- 圆点 -->
      <view class="swiper_dot">
        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>
      </view>
</view>

js

data(){
    swiperList:[
        {
            image:'',
            url:""
        },
                {
            image:'',
            url:""
        }
    ],
     current: 0,//初始化dot
},
//监听current
currentHandle(e) {
	console.log(e)
    //改变current的值
    let { current } = e.detail
    this.setData({
      current
    })
},

样式(根据自己要求调整）

.swiper-box {
  padding: 0 30rpx;
}
.swiper-item {
  border-radius: 10rpx;
  overflow: hidden;
}
.swiper_dot {
  display: flex;
  flex: 1;
  justify-content: center;
  position: absolute;
  bottom: 16rpx;
  left: 42%;//通过绝对定位 在滚动图的正下方 具体看自己
}

.MR10 {
  margin-right: 10rpx;
}

.trans {
  width: 23rpx;
  height: 8rpx;
  background-color: #ffffff70;
  border-radius: 3.5rpx;
  transition: width 0.5s linear;
}

.active {
  background-color: #ffffffd7;
  width: 67rpx;
  transition: width 0.5s linear;
}