站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

小程序如何在輪播圖里面實現(xiàn)點擊跳轉(zhuǎn)

小程序如何在輪播圖里面實現(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',        },      ],

PHP中文網(wǎng),大量免費小程序開發(fā)教程,歡迎學(xué)習(xí)!

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
国内精品人妻无码久久久影院导航| 日韩大片观看网址| 蜜臀98精品国产免费观看 | 中文字幕九七精品乱码| 日韩在线免费播放| 亚洲精品V欧洲精品V日韩精品| 最新69国产成人精品免费视频动漫 | 波多野结衣久久精品| 久久精品久久久久观看99水蜜桃| 日韩精品久久无码中文字幕| 久久精品国产99国产电影网| 在线精品国产一区二区三区| 国产精品午夜一级毛片密呀| 精品日韩一区二区三区视频| 国产av一区二区三区日韩| 国产午夜精品福利| 国产精品二区高清在线| 国产精品酒店视频| 国内精品久久久久久无码不卡| 久久久无码精品人妻一区| 久久只有这精品99| 2017国产精品自拍| 香蕉久久夜色精品国产尤物| 国产精品高清一区二区三区不卡| 亚洲国产精品成人精品小说| 182tv午夜精品视频在线播放| 精品永久久福利一区二区| 69国产精品视频免费| 91久久精品午夜一区二区| 97久久精品亚洲中文字幕无码| 精品熟女少妇av免费久久| 精品无码av一区二区三区| 91免费福利精品国产| 亚洲AV无码国产精品色| 精品国产一区二区三区不卡| 欧乱色国产精品兔费视频| 国产精品福利在线观看| 亚洲国产成人综合精品| 国产精品无码一区二区三区毛片 | 国内精品久久久久久久久蜜桃| 在线精品自拍亚洲第一区|