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.detailthis.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; }

效果图：

总结

以上是生活随笔为你收集整理的支付宝小程序Swiper 滚动图 带圆点和跳转方式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。