? ? 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 滚动图 带圆点和跳转方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。