先看一下效果：
shadow.gif
swiper的相關(guān)屬性
indicator-dots 是否顯示小圓點，也可以自己重新設(shè)置小圓點
circular 是否銜接滑動，就是實現(xiàn)無限滾動
previous-margin 與上一張圖片的間距
next-margin 與下一張圖片的間距
autoplay 實現(xiàn)自動滾動
當(dāng)前大圖currentIndex只有一個值，讓其等于所有item的index，當(dāng)滾動到哪一個，就恰好可以選中哪一個
image.png
動態(tài)曾刪類名
由于微信小程序開發(fā)不同于以往的普通web開發(fā), 因此無法通過js獲取wxml文件的dom結(jié)構(gòu), 因此從js上直接添加一個類名應(yīng)該不可能了. 可是我們可以通過微信小程序數(shù)據(jù)綁定以及view標(biāo)簽的”data-“自定義屬性去更改標(biāo)簽類名.
過數(shù)據(jù)綁定在3個標(biāo)簽上綁定相同的變量num, 當(dāng)點擊不同標(biāo)簽時, 在js邏輯層中通過event.target.dataset.n或者（e.target.dataset.n）來獲取標(biāo)簽data-n值, 然后在wxml中通過三元運算符的匹配便可完成class名的增改
下面直接看代碼：
wxml:
<!--index.wxml-->
<swiper
class="imageContainer"
bindchange="handleChange"
previous-margin="50rpx"
next-margin="50rpx"
circular
autoplay
>
<block wx:for="{{3}}" wx:key>
<swiper-item class="item">
<!-- 當(dāng)前大圖currentIndex只有一個值，讓其等于所有item的index，當(dāng)滾動到哪一個，就恰好可以選中哪一個！-->
<!-- 當(dāng)前大圖currentIndex只有一個值，讓其等于所有item的index，當(dāng)滾動到哪一個，就恰好可以選中哪一個！-->
<image class="itemImg {{currentIndex == index ? 'active': ''}}" src="https://upload-images.jianshu.io/upload_images/14707256-5aee35881aba4623.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/589/format/webp"></image>
</swiper-item>
</block>
</swiper>
<view class='li'>
<view class="{{num==1?'cur':''}} " bindtap='click' data-n="1">氣候</view>
<view class="{{num==2?'cur':''}} " bindtap='click' data-n="2">溫度</view>
<view class="{{num==3?'cur':''}} " bindtap='click' data-n="3">天氣</view>
</view>
wxss:
/**index.wxss**/
/* carousel/index.wxss */
page{
background: #dac8c8f7;
}
.imageContainer{
width: 100%;
height: 500rpx;
background: #fff;
}
.item{
height: 500rpx;
}
.itemImg{
position: absolute;
width: 96%;
left: 50%;
transform: translateX(-50%);
height: 380rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 13%;
}
.active{
opacity: 1;
z-index: 10;
height: 430rpx;
top: 7%;
transition:all .2s ease-in 0s;
}
.li{
display: flex;
justify-content: space-around;
}
.cur{
color: red;
text-decoration:underline;
}
JS:
Page({
data: {
currentIndex: 0,
num:1
},
onLoad: function (options) {
},
/* 這里實現(xiàn)控制中間凸顯圖片的樣式 */
handleChange: function (e) {
this.setData({
//獲取當(dāng)前輪播顯示的大圖
currentIndex: e.detail.current
})
},
// 思路：先給每個元素加一個新屬性，點誰就把誰的新屬性賦值給data中的數(shù)據(jù)
click:function(e){
console.log(e.target.dataset.n)
this.setData({
num:e.target.dataset.n
})
}
})
