axml结构

注意：swiper-item是没有点击事件onTap()需要嵌套一层view包裹图片

点击事件可以放在<view>层或者<image>层 （示例中在<image>层）

<!-- 滚动图 -->
<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(e){
    console.log(e)
    let _url = e.target.dataset.url
    //跳转的路径即<image>绑定的data-url选择你需要的跳转方式
    my.redirectTo({ url: './_url' });
}，

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

.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;
}
//标点的动画效果，如果需要圆点宽高相同添加border-radius 50%即可
.trans {
  width: 23rpx;
  height: 8rpx;
  background-color: #ffffff70; //70代表透明度
  border-radius: 3.5rpx;
  transition: width 0.5s linear;
}
//标点的动态改动 0.5s内改变标点的宽度
.active {
  background-color: #ffffffd7;
  width: 67rpx;
  transition: width 0.5s linear;
}

效果图：