您好,登錄后才能下訂單哦!
這篇文章主要介紹小程序在輪播圖里面實現(xiàn)點擊跳轉(zhuǎn)的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
小程序如何在輪播圖里面實現(xiàn)點擊跳轉(zhuǎn)
輪播圖可以使用swiper組件來實現(xiàn),點擊跳轉(zhuǎn)頁面可以使用navigator組件來實現(xiàn),所以實現(xiàn)點擊輪播圖跳轉(zhuǎn)頁面的方法是:在swiper組件的swiper-item組件里嵌套一個navigator即可。
具體實現(xiàn)代碼如下:
1、WXML代碼
<!--輪播圖 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='{{circular}}'> <swiper-item wx:for="{{imgUrls}}" wx:key='{{index}}'> <navigator url='{{item.link}}'> <image src="{{item.url}}" class="slide-image" mode="aspectFill"></image> </navigator> </swiper-item> </swiper> </view> </view>
2、WXSS代碼
/* 輪播 */ .swiperBanner{ width:100%; height:420rpx !important; margin:0 auto; } .swiperBanner image{ width:100%; height:420rpx !important; } swiper { width:100%; height:420rpx !important; }
3、JS代碼
indicatorDots:false, autoplay:true, interval:3000, duration: 800, circular:true, // 輪播圖 imgUrls: [ { link:'../activity/washCar1/index/index', url:'https://localhost/static/ttcf/img/banner8.png', }, { link: '../activity/Odysseus/index/index', url: 'https://localhost/static/ttcf/img/banner9.png', }, ],
以上是“小程序在輪播圖里面實現(xiàn)點擊跳轉(zhuǎn)的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。