實現(xiàn)效果：
前言
在小程序01中，已經(jīng)學習了如何制作底部導航欄，本節(jié)讓我們一起學習如何制作輪播圖，以及點擊輪播圖完成頁面跳轉。
實現(xiàn)過程
注：（1）前期學習，我這里用的本地的圖片，后期的話，會對接后端接口，動態(tài)獲取數(shù)據(jù)，前期方便學習，就暫時用的本地圖片。（2）關于圖片跳轉地址，因為前期其他頁面還沒寫，所以我這里跳轉的是切換 Tab，如果后期數(shù)據(jù)中有返回跳轉鏈接，可以去掉?navigator? 標簽中的? ?open-type="switchTab"? 屬性。
1 在 index.wxml 文件中，增加以下代碼：
<!-- 頭部廣告圖 -->
<swiper class="top-banner" circular="{{circular}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{images_list}}" wx:key="id">
<navigator url="{{item.link}}" open-type="switchTab">
<swiper-item >
<image src="{{item.image_url}}" class="slide-image"></image>
</swiper-item>
</navigator>
</block>
</swiper>2 在index.wxss 文件中增加輪播圖的樣式
.top-banner {
width: 100%;
height: 360rpx;
}
.slide-image {
width: 100%;
height: 100%;
}3，在index.js 文件中 增加 data 參數(shù)
Page({
data: {
autoplay: true,
indicatorDots: true,
interval: 3000,
duration: 1200,
circular: true,
images_list : [
{
"id": 1,
"image_url": "../../images/banner1.jpg",
"link": "../list/list"
},
{
"id": 2,
"image_url": "../../images/banner2.jpg",
"link": "../mine/mine"
},
],
},
// 事件處理函數(shù)
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
onLoad() {
},
})?踩過的坑
?按著網(wǎng)上的教程，給圖片增加跳轉鏈接后（如下圖），圖片不顯示。
?
?關于此問題的文檔比較少，其中一篇說，navigator? ?標簽放在 swiper-item 標簽外面，于是我就試了試，代碼改成如下圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-559749.html
?然后輪播圖就可以正常顯示了。文章來源地址http://www.zghlxwxcb.cn/news/detail-559749.html
到了這里，關于微信小程序02-輪播圖實現(xiàn)與圖片點擊跳轉的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
