|
話不多(duo)說先(xian)上圖.gif
文章涉及技術點
微信小程序原生Swiper控件
Wxss Transform、Transition
輪播條滾動回調控制
微信小程序條件渲染、列表渲染
全部實現代碼加起來也就三四十行，大部分還用來寫wxml UI代碼，所以功能實現起來非常簡單。
首先(xian)將問題簡單化，能用原生組件(jian)實現出(chu)我(wo)們想要(yao)的效果(guo)，絕不自己開發(fa)Component。原因(yin)：我(wo)懶(lan)+我(wo)自己寫的也不敢說性能堪比原生組件(jian)
先來分析(xi)一波gif中我們需要實現(xian)效果和哪(na)些效果可以直接修改原生Swiper的屬性(xing)就能實現(xian)的
我們需要自己實現的功能
自動滾動+手動拖拽 （原生組件幫我們完成 Property：autoplay）
面板指示點 （原生組件幫我們完成 Property：indicator-dots）
左右可以露出非Active狀態圖的邊緣（即Quiet狀態， 后文class會以這兩個名字定義） （原生組件幫我們完成 Property：previous-margin、next-margin）
圖片滾動到中心位置放大，滾動出去縮小 （我們手寫實現，利用技術點中提到的滾動回調+條件渲染。其中滾動回調用 Property：bindchange）
這(zhe)樣看下(xia)來就很(hen)清(qing)晰了，需(xu)要我們實現的只有一個動(dong)畫放大縮小。再進一步(bu)
就能分成兩種實(shi)現方(fang)式:
wxss實現
js實現
很(hen)顯然wxss實(shi)現代(dai)碼很(hen)少也能達到同樣的效果，so~
-
//.wxml
-
<swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: {{swiperHeight}}px'>
-
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
-
<swiper-item>
-
<image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
-
</image>
-
</swiper-item>
-
</block>
-
</swiper>
-
//.wxss
-
.swiperClass {
-
margin: 0;
-
margin-top: 10px;
-
}
-
-
.slide-image {
-
width: 100%;
-
height: 90%;
-
border-radius: 10px;
-
position: relative;
-
}
-
-
image.active {
-
transform: none;
-
transition: all 0.2s ease-in 0s;
-
}
-
-
image.quiet {
-
transform: scale(0.8333333);
-
transition: all 0.2s ease-in 0s;
-
}
-
//.js
-
data: {
-
imgUrls: [
-
'xxx',
-
'xxx',
-
'xxx',
-
'xxx'
-
],
-
swiperIndex: 0 //這里不寫第一次啟動展示的時候會有問題
-
},
-
-
bindchange(e) {
-
this.setData({
-
swiperIndex: e.detail.current
-
})
-
},
上面Swiper控件(jian)里面還有設(she)置寬高的屬性就(jiu)隨便填(tian)幾個數測試就(jiu)好了，不影響主要功能。
注意(yi)身(shen)體，小(xiao)心禿頂
|
